# Rendimiento de los degradados CSS: ¿ralentizan una web?

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

Un degradado CSS estático es casi gratis. Los costes vienen de lo que se hace con los degradados: desenfoques enormes, fondos que se repintan al hacer scroll y animaciones que nunca paran. Así se distingue una cosa de otra.

## The short version

- Un degradado CSS estático casi no cuesta nada al cargar, porque es una línea de texto y no un archivo que descargar y decodificar.
- Los degradados cuestan tiempo de pintado, que crece con el área pintada y el número de capas, pero un degradado estático se pinta una vez y luego se reutiliza.
- Los riesgos reales de rendimiento son los filtros de desenfoque grandes, los fondos que se repintan al hacer scroll y las animaciones de degradado que se repintan en cada fotograma.
- Animar transform u opacity en una capa de degradado suele ser mucho más barato que animar background-position o los puntos de color.
- La única respuesta fiable para una página concreta es medirla, con paint flashing y una grabación de Performance en las herramientas de desarrollo del navegador.

Un buen **rendimiento de los degradados CSS** es el caso normal: un degradado estático no ralentiza una web de ninguna forma que se pueda notar. Es una línea de texto, así que no hay nada que descargar, nada que decodificar y nada que esperar. Los degradados cuestan un poco de tiempo de pintado, como cualquier otro color de la página. Las páginas lentas vienen de unos pocos patrones concretos construidos sobre degradados: desenfoques grandes, repintados al hacer scroll y animaciones que repintan en cada fotograma. Esta guía muestra cuál es cuál y cómo comprobar tu propia página.

## Carga: degradados frente a imágenes

`background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);` tiene 67 caracteres. Llega dentro de tu hoja de estilos, no necesita ninguna petición extra y se ve nítido a cualquier tamaño y densidad de píxeles. Un fondo de imagen necesita su propia petición, tiene que decodificarse antes de poder dibujarse y debe ser lo bastante grande para pantallas grandes y de alta densidad.

67 caracteres de CSS: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)`

Todo este fondo, a cualquier tamaño, cuesta menos que una frase de texto al cargar.

| Fondo | Descarga | Memoria decodificada a 1920×1080 |
| --- | --- | --- |
| Degradado CSS | Unas pocas decenas de bytes en tu CSS | Sin mapa de bits que conservar; se pinta según hace falta |
| Imagen comprimida (AVIF, WebP, JPEG) | Un archivo aparte, a menudo de decenas a cientos de kilobytes | Unos 8,3 MB (ancho × alto × 4 bytes) |
| La misma imagen a 3840×2160 para un 4K nítido | Aún mayor | Unos 33 MB |

Las imágenes decodificadas se conservan como mapas de bits completos, sea cual sea el tamaño de su archivo. Las cifras de memoria son aritmética simple: píxeles por cuatro bytes.

Así que para fondos sencillos o con pocas capas, CSS gana siempre en la carga. Las imágenes siguen teniendo sentido cuando el fondo es realmente complejo, como un [degradado de malla](https://gradiently.design/es/guide/css-mesh-gradient) pictórico con muchos puntos de color o una textura fotográfica. Entonces el intercambio es peso de archivo por riqueza visual, y a menudo merece la pena.

## Pintado: lo que cuesta un degradado en pantalla

Para mostrar un degradado, el navegador calcula un color para cada píxel que cubre: eso es pintar. El trabajo crece con el área pintada, el número de capas de degradado apiladas y cualquier efecto encima. Para un fondo estático ocurre una vez, y el resultado se reutiliza mientras haces scroll o interactúas, a menos que algo lo invalide.

### Se pinta una vez

- Un degradado estático en una tarjeta o un hero
- Varios resplandores radiales superpuestos que no se mueven
- Una textura de ruido en mosaico sobre un degradado
- Un borde con degradado dibujado con fondos

### Se pinta una y otra vez

- Animar `background-position` o los puntos de color
- `background-attachment: fixed` al hacer scroll
- Desenfoque `backdrop-filter` sobre contenido en movimiento
- Un elemento con degradado que cambia de tamaño continuamente

## Los riesgos reales: desenfoque, fondos fijos y animación

**Desenfoques grandes.** `filter: blur()` y `backdrop-filter` toman muestras de muchos píxeles vecinos para cada píxel, y el trabajo crece con el radio del desenfoque y con el área. Un degradado desenfocado que se pinta una vez suele estar bien. Un `backdrop-filter` sobre contenido que se desplaza por debajo tiene que recalcularse cuando ese contenido se mueve, y ahí es donde las interfaces de [glassmorphism](https://gradiently.design/es/guide/glassmorphism) tienden a tartamudear en móviles modestos.

**Fondos fijos.** `background-attachment: fixed` mantiene un fondo quieto mientras la página se desplaza, lo que puede obligarlo a repintarse en cada paso del scroll. Si quieres un degradado que se quede en su sitio, un elemento con `position: fixed` detrás del contenido suele ser más barato, porque el navegador puede moverlo como una capa aparte.

**Animación.** Mover `background-position` o animar puntos de color con `@property` repinta el elemento en cada fotograma. En un botón es trivial. En un hero a pantalla completa es trabajo continuo mientras la página esté abierta, y se nota como calor y gasto de batería en los móviles.

```css
/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }
```

Dos héroes animados. El segundo anima `transform`, que los navegadores suelen poder gestionar en el compositor sin repintar.

La guía del [degradado animado en CSS](https://gradiently.design/es/guide/css-animated-gradient) tiene el conjunto completo de técnicas, de la más barata a la más flexible.

## Capas y will-change

Promover un elemento a su propia capa de composición, con `will-change: transform` o una animación de transform activa, es lo que hace posible una animación barata. No es gratis: cada capa guarda su propio mapa de bits en la memoria gráfica, aproximadamente ancho × alto × 4 bytes en píxeles del dispositivo. Una capa sobredimensionada para el fondo de un hero está bien. Decenas de tarjetas promovidas, cada una con su propia capa de degradado, pueden usar más memoria de la que ahorran en tiempo de pintado. Añade `will-change` a los elementos que de verdad se animan, no como regla general.

| Patrón | Trabajo del navegador | Alternativa más barata |
| --- | --- | --- |
| `background-position` animado en un hero | Repintado en cada fotograma | `transform` en una capa de degradado sobredimensionada |
| `background-attachment: fixed` | Repintado al hacer scroll | Una capa de degradado `position: fixed` detrás del contenido |
| `backdrop-filter` sobre contenido que se desplaza | Desenfoque recalculado al moverse el contenido | Una capa estática ya desenfocada, o una zona desenfocada más pequeña |
| Filtro de ruido SVG en vivo sobre un elemento grande | El filtro se ejecuta sobre cada píxel repintado | Una imagen de ruido pequeña en mosaico |
| `will-change` en cada tarjeta | Muchas capas guardadas en la memoria gráfica | `will-change` solo en lo que se anima |

Patrones habituales de degradados, lo que le hacen hacer al navegador y la forma más ligera de conseguir el mismo aspecto.

## Cómo medir el rendimiento de un degradado

1. **Activa paint flashing** En las herramientas de desarrollo de Chrome, abre el panel Rendering y activa Paint flashing. Todo lo que parpadea en verde cuando nada debería estar cambiando se está repintando.
2. **Graba una traza de Performance** Graba unos segundos de scroll o de animación en reposo en el panel Performance. Fíjate en cuánto de cada fotograma se va en pintar y si se pierden fotogramas.
3. **Limita la CPU** Usa la limitación de CPU del panel Performance para simular un dispositivo más lento. Un hero que va fluido en un portátil rápido puede sufrir en un móvil de gama media.
4. **Mira el panel Layers** Comprueba cuántas capas de composición existen y cuánta memoria usan. Si hay muchas más de las esperadas, normalmente se abusa de `will-change`.
5. **Prueba en el dispositivo real** Termina en un móvil de verdad. El calor y el gasto de batería de una animación constante se pasan por alto fácilmente en un ordenador de sobremesa.

La [guía de web.dev sobre rendimiento de renderizado](https://web.dev/articles/rendering-performance) explica el proceso que hay detrás de estas herramientas: estilo, layout, pintado y composición. Saber qué etapa activa tu degradado te dice si es barato.

## Una lista de comprobación de rendimiento para degradados

- Usa degradados CSS para fondos sencillos y con capas; imágenes solo cuando el aspecto realmente las necesite.
- Mantén moderados los radios de desenfoque y evita `backdrop-filter` sobre áreas grandes que se desplazan.
- Sustituye `background-attachment: fixed` por una capa de posición fija.
- Anima `transform` u `opacity`, no `background-position`, en áreas grandes.
- Las animaciones lentas y ambientales pueden detenerse por completo para quienes usan [movimiento reducido](https://gradiently.design/es/guide/reduced-motion).
- Añade grano como una imagen pequeña en mosaico, no como un filtro SVG en vivo sobre un elemento grande; mira la [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture).
- Mide antes y después con paint flashing y una grabación de Performance.

## FAQ

### ¿Ralentizan los degradados CSS una web?

Los degradados CSS estáticos no, de ninguna forma perceptible. No necesitan descarga y se pintan una vez. Lo que cuesta rendimiento son los desenfoques grandes, los fondos fijos y la animación constante.

### ¿Es un degradado CSS más rápido que una imagen de fondo?

Normalmente sí. Un degradado son unas pocas decenas de bytes de CSS sin petición ni decodificación, mientras que una imagen necesita descarga y se guarda en memoria como un mapa de bits completo.

### ¿Son malos para el rendimiento los degradados animados?

Animar `background-position` o los puntos de color repinta en cada fotograma, lo que importa en áreas grandes. Animar `transform` u `opacity` en una capa de degradado suele ser mucho más barato.

### ¿Por qué va lento mi fondo degradado desenfocado?

El desenfoque toma muestras de muchos píxeles vecinos para cada píxel, así que el coste crece con el radio y el área. Es peor con `backdrop-filter` sobre contenido que se desplaza o se anima.

### ¿Cómo compruebo si mi degradado se está repintando?

Activa Paint flashing en el panel Rendering de las herramientas de desarrollo de Chrome. Las zonas que siguen parpadeando con la página en reposo se están repintando.