# Fondos con degradado animado en CSS, bien hechos

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

Los degradados no se pueden animar directamente, pero sí todo lo que los rodea. Cuatro técnicas, lo que le cuesta cada una al navegador y cómo mantener el movimiento sereno y opcional.

## The short version

- Los navegadores no pueden interpolar entre dos valores de degradado, así que un degradado animado en CSS mueve, funde o transforma el degradado en lugar de animarlo directamente.
- La técnica clásica hace el fondo más grande que el elemento y anima background-position, lo que funciona en todas partes pero repinta cada fotograma.
- Registrar propiedades personalizadas con @property permite al navegador animar colores, ángulos y posiciones sueltos dentro de un degradado.
- Animar transform u opacity en una capa de degradado aparte suele ser la opción más barata, porque los navegadores a menudo pueden componerla sin repintar.
- Toda animación de degradado debería detenerse, o quedar casi quieta, cuando la persona ha pedido movimiento reducido.

Un **degradado animado en CSS** es un fondo degradado que cambia de color o de posición con el tiempo. Hay un problema: si escribes dos degradados distintos en una regla `@keyframes`, los navegadores no los mezclan, saltan. Por eso todas las técnicas que funcionan animan algo junto al degradado: su posición, las propiedades personalizadas de su interior o la capa en la que está pintado. Cuál elijas decide lo suave que se ve y cuánto trabajo hace el navegador en cada fotograma.

- Fotograma 1: atardecer: `linear-gradient(120deg, #1e1b4b, #7c3aed 45%, #f472b6)`
- Fotograma 2: más tarde: `linear-gradient(160deg, #1e1b4b, #6d28d9 35%, #fb7185)`
- Fotograma 3: brasa: `linear-gradient(200deg, #1e1b4b, #4c1d95 30%, #fb923c)`

Tres momentos de una animación lenta. La dirección y el color se mueven, pero la paleta sigue siendo de una sola familia.

Para la parte de diseño, cuándo ayuda el movimiento a una marca y cómo marcarle el ritmo, mira los [fondos con degradado animado](https://gradiently.design/es/guide/animated-gradient-background). Esta guía es el código.

## Técnica 1: mueve un fondo sobredimensionado

Haz el degradado de dos a cuatro veces el tamaño del elemento con `background-size` y anima después `background-position` para que se vea una parte distinta con el tiempo. Funciona en todos los navegadores y no necesita JavaScript. Usa `alternate` para que el movimiento se invierta con suavidad en lugar de saltar al principio.

```css
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6, #fb923c);
  background-size: 300% 300%;
  animation: pan 18s ease-in-out infinite alternate;
}

@keyframes pan {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
```

El degradado animado clásico. Las duraciones lentas, de 12 a 30 segundos, se sienten ambientales y no ajetreadas.

El coste: `background-position` no es algo que los navegadores puedan mover solo con la tarjeta gráfica, así que el elemento se repinta en cada fotograma. En un botón no es nada. En un hero a pantalla completa es trabajo real que dura mientras la página esté abierta.

## Técnica 2: anima los puntos de color con @property

Las propiedades personalizadas suelen ser cadenas de texto, que no se pueden interpolar. Registrar una con `@property` le da un tipo, como `<color>`, `<angle>` o `<percentage>`, y las propiedades con tipo se animan con suavidad. Úsalas dentro del degradado y podrás animar directamente los colores, el ángulo o la posición de un punto. `@property` es compatible con todos los navegadores principales actuales; consulta [caniuse](https://caniuse.com/mdn-css_at-rules_property) si das soporte a otros más antiguos.

```css
@property --from {
  syntax: "<color>";
  inherits: false;
  initial-value: #7c3aed;
}
@property --to {
  syntax: "<color>";
  inherits: false;
  initial-value: #f472b6;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 120deg;
}

.hero {
  background: linear-gradient(var(--angle), var(--from), var(--to));
  animation: shift 16s ease-in-out infinite alternate;
}

@keyframes shift {
  to {
    --from: #0891b2;
    --to: #fb923c;
    --angle: 200deg;
  }
}
```

Colores y ángulo animándose dentro del degradado. Las propiedades sin registrar saltarían en lugar de mezclarse.

- Inicio: de violeta a rosa: `linear-gradient(120deg, #7c3aed, #f472b6)`
- Final: de cian a naranja: `linear-gradient(200deg, #0891b2, #fb923c)`

Los dos extremos de la animación de arriba. El navegador mezcla cada fotograma intermedio.

Esta técnica también repinta en cada fotograma, como la primera. Su ventaja es el control: puedes mover un solo resplandor en un [degradado de malla](https://gradiently.design/es/guide/css-mesh-gradient), girar un [borde cónico](https://gradiently.design/es/guide/css-gradient-border) o llevar un degradado de marca hacia una segunda paleta sin fondos sobredimensionados.

## Técnica 3: transforma una capa de degradado

Pon el degradado en un pseudoelemento mucho mayor que el elemento y anima su `transform`, por ejemplo una rotación o deriva lenta. Los navegadores suelen poder mover una capa transformada con la tarjeta gráfica sin repintarla, así que es la forma más barata de animar un degradado grande. `will-change: transform` sugiere que la capa se promueva de antemano.

```css
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #0891b2, #1e1b4b);
  animation: turn 40s linear infinite;
  will-change: transform;
}

@keyframes turn {
  to { transform: rotate(1turn); }
}
```

Un enorme degradado cónico que gira despacio detrás del contenido. El inset negativo mantiene cubiertas las esquinas al rotar.

## Técnica 4: funde dos degradados

Apila dos capas de degradado y anima la `opacity` de la de arriba. La opacidad también es una propiedad amiga del compositor, así que el fundido es suave y barato. Encaja con cambios lentos de ambiente, como una paleta de día que se funde con una de noche, y permite que los dos degradados sean completamente distintos en estructura.

```css
.sky {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #7dd3fc, #fde68a);
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #0f172a, #7c3aed);
  animation: dusk 20s ease-in-out infinite alternate;
}

@keyframes dusk {
  from { opacity: 0; }
  to   { opacity: 1; }
}
```

El día se funde en noche y vuelve. Solo cambia la opacidad, así que no se repinta nada.

## Elegir una técnica

| Técnica | Trabajo del navegador por fotograma | Mejor para |
| --- | --- | --- |
| Mover `background-position` | Repintado | Elementos pequeños, botones, texto |
| Colores y ángulos con `@property` | Repintado | Cambios de color precisos, bordes giratorios |
| `transform` en una capa | Normalmente solo composición | Fondos grandes, a pantalla completa |
| Fundido de `opacity` | Normalmente solo composición | Cambios lentos de ambiente o de paleta |

Los repintados no importan en zonas pequeñas. Para zonas grandes, prefiere transform y opacity.

Mide en lugar de adivinar. En las herramientas de desarrollo de Chrome, el panel Rendering con paint flashing resalta las zonas que se repintan en cada fotograma, y una grabación de Performance muestra cuánto de cada fotograma se va en pintar. [Rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance) lo recorre paso a paso.

## Movimiento reducido y buenos modales

Algunas personas se marean o se distraen con el movimiento del fondo, y los sistemas operativos les permiten pedir menos. Respétalo con una consulta `prefers-reduced-motion` que detenga la animación y deje un fotograma quieto y terminado. La guía de [movimiento reducido](https://gradiently.design/es/guide/reduced-motion) explica qué cuenta como movimiento que vale la pena quitar.

```css
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero::before,
  .sky::after {
    animation: none;
  }
}
```

Una regla que detiene todas las técnicas anteriores. Comprueba que el fotograma que queda sigue viéndose bien.

### Evita

- Ciclos más rápidos de unos 8 segundos en zonas grandes
- Rotación de tono arcoíris por toda la página
- Movimiento detrás de un texto que la gente necesita leer
- Animaciones que siguen funcionando cuando la pestaña lleva minutos inactiva

### Haz

- Movimiento lento y ambiental dentro de una sola familia de color
- Movimiento en el hero, quietud en el contenido
- Un fotograma quieto y sereno para el movimiento reducido
- Probar en un portátil y un móvil modestos, no solo en un sobremesa rápido

## FAQ

### ¿Se puede animar un degradado CSS?

No directamente: los navegadores saltan entre dos valores de degradado en los fotogramas clave. Anima en su lugar `background-position`, propiedades personalizadas registradas usadas dentro del degradado, o el transform y la opacity de una capa de degradado.

### ¿Cuál es la forma más suave de animar un fondo degradado?

Animar `transform` u `opacity` en una capa de degradado aparte, porque los navegadores suelen poder gestionarlas sin repintar.

### ¿Cómo animo los colores de un degradado en CSS?

Registra cada color con `@property` usando `syntax: "<color>"`, usa las propiedades en el degradado y cámbialas en `@keyframes`.

### ¿Ralentizan una página los degradados animados?

Los pequeños rara vez importan. Los fondos animados grandes que se repintan en cada fotograma pueden costar batería y fluidez, así que prefiere transform u opacity y mide con las herramientas de desarrollo.

### ¿Cómo respeto el movimiento reducido en las animaciones de degradado?

Envuelve una regla `animation: none` en `@media (prefers-reduced-motion: reduce)` para que quienes piden menos movimiento vean un fotograma quieto.