Saltar al contenido
FreeKitX

Generador de Gradientes de Malla

Guardar esta herramienta en marcadores

Guarda esta página en tu navegador

En un teléfono, elige Añadir marcador en el menú o las opciones de compartir del navegador.

Diseña gradientes de malla fluidos con puntos de color interactivos, semillas aleatorias reproducibles y exportación en 4K.

Generador de Gradientes de Malla y Fondos Fluidos

Gratis · Procesamiento local

Crea gradientes suaves con puntos de control interactivos, semillas aleatorias y exportación en 4K.

Lienzo de Gradiente en Vivo
Lienzo Interactivo

Arrastra los puntos o usa las flechas del teclado / controles deslizantes para reposicionar.

1
2
3
4

Ajustes Preestablecidos

Controles de Gradiente de Malla

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

Cantidad de Puntos: 4 / 6

Se requiere un mínimo de 4 puntos de control.

#2beeb3
#0f172a
50 px
px

Ajusta la intensidad del desenfoque para transiciones más suaves entre puntos de color.

Configuración Avanzada

Usa una semilla numérica para reproducir exactamente el mismo gradiente.

Punto Seleccionado: point-1
21 %
%
34 %
%

Exportar y Descargar

Variante CSS

Declaraciones de fondo estándar sin desenfoque de filtro. Seguro para cualquier elemento.

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);

Herramientas relacionadas

Respuesta directa

Un gradiente de malla (mesh gradient) es un efecto visual moderno que fusiona múltiples puntos de color radiales sobre una superficie bidimensional, generando transiciones fluidas y orgánicas sin ejes lineales rígidos.

Cómo usar esta herramienta

1

Posicionar puntos de color y preajustes

Arrastra de 4 a 6 puntos de control en el lienzo o selecciona un preajuste armónico para definir los focos cromáticos.

2

Ajustar suavidad y semilla aleatoria

Modifica el radio de desenfoque para transiciones más difusas, o introduce una semilla numérica para reproducir el diseño con exactitud.

3

Copiar CSS o exportar fondo de pantalla

Copia declaraciones de fondo ligeras, obtén reglas CSS completas aisladas, o descarga fondos PNG de alta resolución hasta 4K.

Implementación de gradientes de malla en CSS: Solo fondo frente a CSS completo

Los gradientes de malla nativos del navegador se construyen superponiendo varias capas de radial-gradient() sobre un color base sólido. El modo «Solo fondo» genera declaraciones limpias de fondo sin filtros de desenfoque a nivel de elemento, resultando completamente seguro para cualquier estructura HTML. El modo «CSS completo» aplica el filtro blur en un pseudoelemento ::before aislado con margen ampliado, garantizando que los textos, enlaces y botones secundarios conserven su nitidez y plena interactividad.

background-image: radial-gradient(at x1 y1, c1, transparent r1), radial-gradient(at x2 y2, c2, transparent r2);
  • Solo fondo: Múltiples gradientes radiales ligeros sin desenfoque de filtro; totalmente seguro para cualquier elemento.
  • CSS completo: Pseudoelemento ::before aislado con filtro blur; los elementos secundarios permanecen nítidos e interactivos.
  • Semilla determinista: El algoritmo Mulberry32 PRNG garantiza la reproducción idéntica de coordenadas y colores.

Preguntas frecuentes

¿Cómo funcionan los gradientes de malla en CSS puro sin imágenes?

Combinan múltiples declaraciones radial-gradient() con paradas hacia transparente sobre un color base. El motor gráfico del navegador interpola los bordes transparentes superpuestos, creando transiciones fluidas naturales.

¿Cuál es la diferencia entre los modos «Solo fondo» y «CSS completo»?

«Solo fondo» exporta propiedades de fondo estándar sin filtros, garantizando total seguridad para cualquier contenedor. «CSS completo» utiliza un pseudoelemento ::before con desenfoque aislado, logrando un difuminado más suave sin volver borrosos los textos o botones hijos.

¿Cuáles son las limitaciones de rendimiento y compatibilidad del navegador?

Superponer numerosos gradientes radiales con filtros de desenfoque intensos puede incrementar el costo de repintado al desplazarse rápidamente en dispositivos móviles con GPUs de bajo consumo. Asimismo, rasterizar fondos en 4K se ejecuta localmente y puede requerir un breve procesamiento en hardware antiguo.

¿Se procesan los gradientes o imágenes en un servidor externo?

No. Todos los cálculos cromáticos, la evaluación de la semilla aleatoria, la generación de código CSS y la rasterización Canvas se realizan 100% en tu navegador de forma local.

Referencias y normas autorizadas