Fondos con degradado animado en CSS, bien hechos

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.

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. 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.

.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 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 si das soporte a otros más antiguos.

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

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, girar un borde cónico 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.

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

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.

.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; }
}

Elegir una técnica

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 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 explica qué cuenta como movimiento que vale la pena quitar.

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