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

[Canonical HTML page](https://gradiently.design/es/guide/css-mesh-gradient)

No existe mesh-gradient() en CSS. Este es el método de capas que lo imita con convicción, el desenfoque y el grano que lo rematan y cuándo es mejor una imagen o un shader.

## The short version

- CSS no tiene una función nativa de degradado de malla, así que un degradado de malla en CSS se construye apilando varios degradados radiales sobre un color base plano.
- Cada capa es una mancha de color en su propia posición que se desvanece a transparente, y los solapamientos crean la mezcla suave y multidireccional de una malla.
- Un filtro de desenfoque en un pseudoelemento suaviza más las manchas, y una tenue capa de ruido oculta el banding.
- Los degradados en capas estáticos son baratos de renderizar, pero los desenfoques grandes y las capas animadas se repintan a menudo y conviene mantenerlos lentos, pequeños u opcionales.
- Cuando un diseño necesita muchos puntos de color, formas deformadas o movimiento fluido a pantalla completa, una imagen exportada, un vídeo o un shader WebGL suele ser la mejor herramienta.

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](https://gradiently.design/es/guide/mesh-gradients). 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.

- Mancha 1: violeta, arriba a la izquierda: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Mancha 2: rosa, arriba a la derecha: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Mancha 3: cian, abajo: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Mancha 4: acento ámbar: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

Los cuatro puntos de color de una malla, cada uno solo sobre la base marino. Apilados, se mezclan en un único campo.

```css
.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%);
}
```

La pila completa. Cambia un valor `at` y toda la composición se reequilibra.

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

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. **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](https://gradiently.design/es/guide/muddy-gradients) explican por qué y cómo evitarlo.
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. **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. **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. **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.

```css
.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);
}
```

Una malla desenfocada en un pseudoelemento. El texto dentro de `.mesh` se mantiene nítido porque solo se desenfoca el pseudoelemento.

> **El desenfoque es la parte cara** Un desenfoque estático se pinta una vez y normalmente no hay problema. Una capa desenfocada que se mueve o cambia de tamaño se repinta en cada fotograma, y los radios de desenfoque grandes a pantalla completa cuestan más. Mira el [rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance).

## 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](https://gradiently.design/es/guide/css-noise-texture), y el razonamiento de diseño en los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients).

### Sin grano

- Anillos visibles en las zonas oscuras de muchas pantallas
- La superficie se lee como un color plano de pantalla
- Parece un ajuste predeterminado de plantilla

### Con un grano tenue

- Los escalones se rompen y desaparecen
- La superficie se lee como papel, película o impresión
- Se siente deliberado y terminado

## 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](https://gradiently.design/es/guide/reduced-motion).

```css
@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; }
}
```

Una mancha que se desplaza por la parte superior. Añade una segunda propiedad por cada coordenada que quieras mover.

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](https://gradiently.design/es/guide/css-animated-gradient) cubre alternativas más baratas, como mover una capa sobredimensionada con `transform`.

## Cuándo usar una imagen o WebGL en su lugar

| Enfoque | Mejor para | Ojo con |
| --- | --- | --- |
| Degradados CSS en capas | Fondos estáticos, tarjetas, heroes con de tres a cinco colores | Manchas de aspecto redondo, banding sin grano |
| CSS con desenfoque | Campos estáticos más suaves y orgánicos | Coste de repintado si se anima o cambia de tamaño a menudo |
| Imagen exportada (AVIF o WebP) | Mallas complejas con muchos puntos o formas pictóricas | Peso del archivo y un recorte fijo por formato |
| Bucle de vídeo | Movimiento rico en un hero | Tamaño del archivo, reglas de reproducción automática, movimiento reducido |
| Shader WebGL | Movimiento fluido e interactivo a pantalla completa | Complejidad del código, uso de batería, alternativas |

Elige la herramienta más ligera que siga viéndose bien.

Los shaders se tratan en los [degradados WebGL](https://gradiently.design/es/guide/shader-gradients). 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.

Un Mark: manchas de color, material y grano renderizados en vivo en lugar de aproximados con capas.

## FAQ

### ¿Se puede hacer un degradado de malla solo con CSS?

No de forma nativa, pero apilar de tres a cinco degradados radiales que se desvanecen a transparente sobre un color base da una malla convincente. Un desenfoque y una capa de ruido lo rematan.

### ¿Cuántos degradados radiales necesita una malla CSS?

De tres a cinco suele bastar. Menos parece un simple resplandor; más tiende a volverse turbio y más difícil de equilibrar.

### ¿Por qué mi degradado de malla CSS se ve turbio?

Los tonos opuestos que se encuentran en sRGB se mezclan pasando por el gris. Usa colores vecinos, reduce el solapamiento o añade `in oklab` a cada capa.

### ¿Es malo para el rendimiento un degradado de malla CSS?

Uno estático es barato. Los costes suben con los filtros de desenfoque grandes y con la animación, porque el fondo se repinta en cada fotograma.

### ¿Admite SVG los degradados de malla?

Los degradados de malla se esbozaron para SVG 2 pero los navegadores nunca los implementaron, así que en la web se imitan con capas, se usa una imagen o se renderizan con WebGL.