Degradado de malla en CSS: cómo crearlo con capas radiales

Un degradado de malla en CSS es un fondo donde el color se mezcla en varias direcciones a la vez, como si manchas de pigmento se hubieran empapado unas en otras. CSS no tiene una función de malla, y los degradados de malla que se esbozaron para SVG nunca llegaron a los navegadores, así que la versión web es una imitación: de tres a cinco capas de radial-gradient() apiladas sobre un color plano, cada una desvaneciéndose a transparent. Bien hecho, se acerca tanto que nadie nota la diferencia, pesa unos cientos de bytes y se ve nítido a cualquier tamaño.

Si quieres primero la teoría de diseño, qué es una malla y por qué se siente orgánica, lee los degradados de malla. Esta guía trata de construir uno en código.

Cómo funciona el método de capas

Cada capa es un punto de color. Su posición es el valor at, su alcance es la distancia del desvanecimiento y su intensidad es el alfa del color. Como el primer degradado de background-image se pinta encima, el orden importa menos de lo que parece: cada capa es casi transparente, así que se mezclan donde se solapan. El background-color base se ve donde no llega ninguna mancha.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}

Paso a paso: crea tu propio degradado de malla en CSS

1. 1

   Elige un fondo

   Elige el color plano que se ve entre las manchas. Los fondos oscuros hacen brillar las manchas; los claros las hacen parecer acuarela. El fondo también es tu alternativa si los degradados fallan.

2. 2

   Elige de tres a cinco colores relacionados

   Los tonos vecinos se mezclan limpiamente. Los opuestos, como azul y naranja, se encuentran en una mancha gris. Los degradados turbios explican por qué y cómo evitarlo.

3. 3

   Coloca las manchas descentradas

   Empuja los puntos hacia las esquinas y los bordes y deja que al menos uno quede en parte fuera de la caja, como at 110% 0%. Las manchas centradas parecen una diana.

4. 4

   Varía el alcance y la intensidad

   Da a un color el mayor desvanecimiento y el alfa más alto para que lidere. Mantén el acento pequeño y más débil. Las manchas iguales parecen mecánicas.

5. 5

   Mezcla en un espacio de color mejor

   Añade in oklab a cada capa, como en radial-gradient(in oklab circle at 15% 20%, ...), donde se admita. Los solapamientos quedan más brillantes que en sRGB.

6. 6

   Remata con grano

   Los desvanecimientos grandes y suaves hacen banding en muchas pantallas. Una tenue superposición de ruido lo arregla y añade un aire de impreso; mira más abajo.

Mezclas más suaves con desenfoque

Los desvanecimientos radiales son suaves, pero sus formas son claramente redondas. Un desenfoque suaviza los círculos hacia algo más orgánico. Pon las capas en un pseudoelemento, desenfócalo y hazlo más grande con un inset negativo para que los bordes desenfocados no se desvanezcan en la página. isolation: isolate mantiene el z-index negativo dentro del componente.

.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}

Añadir grano a un degradado de malla en CSS

El grano hace dos trabajos. Rompe los escalones visibles que aparecen en desvanecimientos anchos y de poco contraste, y da a la superficie la cualidad táctil, como de película, que hace que los degradados parezcan pensados y no predeterminados. En CSS, la fuente habitual es un filtro SVG feTurbulence usado como una imagen de fondo diminuta, superpuesta con poca opacidad. La técnica completa está en la textura de ruido en CSS, y el razonamiento de diseño en los degradados con grano.

Animar un degradado de malla

Las posiciones de un degradado no se pueden animar por sí solas, pero las propiedades personalizadas registradas sí. Declara cada coordenada móvil con @property, úsala dentro del degradado y anima la propiedad. Mantén el movimiento lento y desactívalo para quienes piden movimiento reducido.

@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}

Cada fotograma de esta animación repinta todo el fondo. En una tarjeta pequeña es trivial; en un hero a pantalla completa vale la pena medirlo. La guía del degradado animado cubre alternativas más baratas, como mover una capa sobredimensionada con transform.

Cuándo usar una imagen o WebGL en su lugar

Los shaders se tratan en los degradados WebGL. Un camino intermedio es diseñar el fondo una vez como un material vivo y exportarlo: los Marks de Gradiently son materiales de tipo malla con color, grano, luz y movimiento, y un diseño hecho con uno se exporta como PNG, JPEG o un bucle de vídeo continuo de 5 a 30 segundos.

GR·Y97R·RQ

August Basin

Ver este Mark