Generador de degradado mesh

Crea un fondo multicolor estático o animado con cuatro manchas radiales y un color base. Ajusta los colores, la posición y el alcance de cada mancha, y exporta CSS, clases de Tailwind, SVG o un PNG. Todo se genera en tu navegador.

Solo local

AnimarAnima el degradado con un movimiento suave. Se respeta la preferencia de movimiento reducido.

Ajustes predefinidos

Elige un preajuste para configurar todos los controles a la vez y ajusta después.

Color de fondo

Radio0px

Colores

Mancha 1

Posición 1 horizontal18%Posición 1 vertical22%Suavidad58%

Mancha 2

Posición 2 horizontal74%Posición 2 vertical30%Suavidad52%

Mancha 3

Posición 3 horizontal42%Posición 3 vertical78%Suavidad60%

Mancha 4

Posición 4 horizontal88%Posición 4 vertical82%Suavidad45%

Consejo: arrastra los controles numerados de la vista previa para mover cada mancha. Las flechas ajustan, Mayús acelera.

Un preajuste ajusta todos los controles con un clic; Aleatorio hace lo mismo con valores al azar.

CSS

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%, #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%, #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%, #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%, #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
  border-radius: 0px;
}

El CSS son degradados radiales superpuestos: uno por mancha, cada uno difuminado a transparente, sobre el color de fondo. Por eso no se ven costuras: las manchas no se mezclan, se apilan.

Clases de Tailwind

bg-[#070b1a] rounded-[0px] bg-[image:radial-gradient(ellipse_45%_45%_at_88%_82%,_#0ea5e9_0%,_rgb(14_165_233_/_0.55)_70%,_rgb(14_165_233_/_0)_100%),_radial-gradient(ellipse_60%_60%_at_42%_78%,_#a855f7_0%,_rgb(168_85_247_/_0.55)_70%,_rgb(168_85_247_/_0)_100%),_radial-gradient(ellipse_52%_52%_at_74%_30%,_#22d3a5_0%,_rgb(34_211_165_/_0.55)_70%,_rgb(34_211_165_/_0)_100%),_radial-gradient(ellipse_58%_58%_at_18%_22%,_#5b8cff_0%,_rgb(91_140_255_/_0.55)_70%,_rgb(91_140_255_/_0)_100%)]

Valores arbitrarios, así que cada número es exacto: ninguno se redondea al paso de escala más cercano.

¿Cómo funciona Generador de degradado mesh?

Cada mancha es un degradado radial elíptico sobre un color base. Su alcance determina el radio horizontal como porcentaje del ancho y el vertical como porcentaje de la altura. La cuarta mancha queda delante de las demás, tanto en la vista previa SVG como en el CSS exportado.

Los colores se desvanecen hasta su propio tono con alfa cero. Las zonas solapadas se mezclan con las capas que hay debajo y pueden cambiar de aspecto según el color base. El CSS estándar también interpola correctamente hacia `transparent`: los tonos apagados no se deben necesariamente a esa palabra clave.

La opción de animación desplaza las manchas durante un ciclo de entre 6 y 30 segundos. El CSS registra propiedades numéricas con `@property`; el SVG utiliza transformaciones. Ambos respetan `prefers-reduced-motion`. El PNG conserva una imagen fija de la posición inicial.

Los fondos grandes y las animaciones pueden aumentar el trabajo de renderizado. Comprueba el rendimiento en tus dispositivos de destino y el contraste en todas las zonas que queden detrás del texto. Una superficie sólida facilita la lectura sobre colores cambiantes.

Ajustes del degradado

Color de fondo #070b1a
Mancha 1 #5b8cff · 18%, 22% · 58%
Mancha 2 #22d3a5 · 74%, 30% · 52%
Mancha 3 #a855f7 · 42%, 78% · 60%
Mancha 4 #0ea5e9 · 88%, 82% · 45%

CSS generado

.mesh {
  background-color: #070b1a;
  background-image:
    radial-gradient(ellipse 45% 45% at 88% 82%,
      #0ea5e9 0%, rgb(14 165 233 / 0.55) 70%, rgb(14 165 233 / 0) 100%),
    radial-gradient(ellipse 60% 60% at 42% 78%,
      #a855f7 0%, rgb(168 85 247 / 0.55) 70%, rgb(168 85 247 / 0) 100%),
    radial-gradient(ellipse 52% 52% at 74% 30%,
      #22d3a5 0%, rgb(34 211 165 / 0.55) 70%, rgb(34 211 165 / 0) 100%),
    radial-gradient(ellipse 58% 58% at 18% 22%,
      #5b8cff 0%, rgb(91 140 255 / 0.55) 70%, rgb(91 140 255 / 0) 100%);
}

¿Qué opciones y casos límite admite Generador de degradado mesh?

Referencia técnica y opciones
Parámetro	Tipo	Valor predeterminado	Comportamiento y casos límite
Posición de la mancha	0–100%	—	Coloca el centro de cada mancha como porcentaje del ancho y de la altura del elemento.
Alcance	porcentaje	58%	Fija los radios de la elipse respecto al ancho y a la altura del elemento; la mancha se desvanece en su borde.
Color base	hex	#070b1a	Se muestra donde las manchas son transparentes y también influye en las zonas donde se superponen.
Punto final del degradado	rgb() con alfa 0	automático	Usa el mismo color de la mancha con opacidad cero para el punto exterior del degradado.
Orden de las capas	de atrás hacia delante	capa 4 al frente	La cuarta mancha queda encima. El CSS enumera los degradados en el orden necesario para coincidir con el SVG.
border-radius	px	0	Redondea las esquinas de la vista previa y de los archivos exportados.

Preguntas frecuentes

¿Cómo hago un degradado mesh en CSS?

Apila varios `radial-gradient()` sobre un `background-color`. El generador crea los cuatro degradados con sus centros, radios elípticos y puntos de color. Copia el CSS completo o las clases de Tailwind y aplícalos a tu elemento.

¿Por qué aparecen tonos apagados entre los colores?

El color base y la mezcla de capas semitransparentes pueden producir tonos apagados. Cambia el color base, separa las manchas o reduce su alcance. El CSS estándar interpola hacia `transparent` con alfa premultiplicado, así que esa palabra clave no provoca por sí sola un halo oscuro.

¿Puedo animar el degradado?

Sí. Activa la animación y elige un ciclo de 6 a 30 segundos. El CSS utiliza propiedades registradas con `@property` y fotogramas clave; el SVG mueve sus manchas. Para Tailwind, incluye también las reglas de animación del CSS generado. La preferencia de movimiento reducido desactiva la animación.

¿Afecta al rendimiento?

Depende del tamaño, la animación y el dispositivo. Prueba los fondos grandes en móviles y utiliza el PNG estático si necesitas reducir el trabajo de renderizado. Un fondo estático no necesita recalcular una animación en cada fotograma.

¿Puedo poner texto encima?

Sí, pero revisa el contraste sobre las zonas más claras y más oscuras, también durante la animación. Un panel sólido o un fondo uniforme detrás del texto ofrece un resultado más predecible.

¿En qué se diferencia de un degradado lineal?

Un degradado lineal cambia a lo largo de un eje. Este fondo combina cuatro centros radiales en dos dimensiones, lo que permite colocar cada zona de color por separado.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas