Efecto hover con degradado en CSS: cuatro formas de animarlo

Un efecto hover con degradado en CSS necesita un rodeo, porque los navegadores no animan background-image: cambia el degradado en :hover y salta. Cuatro técnicas dan un resultado suave. Desliza un degradado sobredimensionado con background-position, anima paradas de color registradas con @property, funde un segundo degradado en un pseudoelemento o mueve un brillo radial con el cursor. Cada una encaja con elementos distintos, y todas están abajo con su código.

Por qué transition no funciona con degradados

Para el navegador, un degradado es una imagen. Sabe interpolar un número o un color, pero no una imagen en otra, así que background-image no se interpola y el degradado nuevo sustituye al anterior al instante. Las propiedades personalizadas usadas dentro del degradado se comportan igual salvo que las registres, porque una propiedad sin registrar es solo texto.

/* This snaps, with no easing */
.btn {
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
  transition: background-image 400ms ease;
}
.btn:hover {
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
}

Técnica 1: deslizar un degradado sobredimensionado

Haz el fondo más grande que el elemento y pinta en él los dos estados; después muévelo. background-position se puede animar, así que los colores nuevos entran deslizándose. Funciona en todos los navegadores y no necesita registro.

.btn {
  background-image: linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 500ms ease;
}

.btn:hover {
  background-position: 100% 50%;
}

El movimiento se lee como un barrido, que encaja en botones y enlaces. Convence menos en tarjetas grandes, donde se ve viajar el degradado. Animar background-position repinta, lo que está bien en elementos pequeños; para una superficie grande, usa la técnica 3. Botones con degradado en CSS tiene más patrones de botón basados en esto.

Técnica 2: animar las paradas de color con @property

Registra los colores de las paradas como propiedades personalizadas con tipo y el navegador podrá interpolarlos. El degradado cambia entonces de color en el sitio, sin deslizarse. @property funciona en todos los navegadores principales actuales; los antiguos simplemente saltan, lo que es una alternativa aceptable para un hover. Las reglas de registro se explican en @property en CSS.

@property --stop-a {
  syntax: "<color>";
  inherits: false;
  initial-value: #1e1b4b;
}

@property --stop-b {
  syntax: "<color>";
  inherits: false;
  initial-value: #6d28d9;
}

.card {
  background-image: linear-gradient(135deg, var(--stop-a), var(--stop-b));
  transition: --stop-a 450ms ease, --stop-b 450ms ease;
}

.card:hover {
  --stop-a: #6d28d9;
  --stop-b: #f472b6;
}

El mismo truco anima el ángulo. Registra --angle con syntax: "<angle>", úsalo en linear-gradient(var(--angle), ...) y cámbialo en hover: un degradado que gira de 135 a 225 grados cuando llega el puntero es un detalle sutil y pulido para tarjetas y bordes con degradado.

Las dos técnicas vistas hasta aquí también funcionan con texto con degradado. El texto recortado con background-clip: text muestra lo que haga el fondo, así que un deslizamiento o una transición de paradas en un titular hace que el color recorra las letras al pasar el cursor. Mantén el cambio suave en titulares que la gente tiene que leer, y asegúrate de que ambos estados cumplen el contraste con la página.

Técnica 3: fundir dos degradados

Pon el degradado del hover en un pseudoelemento encima de la base y funde su opacidad. Los cambios de opacidad los gestiona el compositor sin repintar, así que es la opción más suave para tarjetas grandes, paneles de cabecera y cualquier cosa dentro de una cuadrícula larga.

.tile {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(135deg, #1e1b4b, #6d28d9);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #6d28d9, #f472b6);
  opacity: 0;
  transition: opacity 400ms ease;
}

.tile:hover::before {
  opacity: 1;
}

Técnica 4: un brillo que sigue al cursor

Un degradado radial posicionado con propiedades personalizadas puede seguir al puntero. Define --x y --y desde un pequeño script y la luz se moverá con la mano. Mantenlo suave y lejos del texto: debe sentirse como luz sobre una superficie, nunca como un halo alrededor de las palabras.

.panel {
  background-image:
    radial-gradient(circle 220px at var(--x, 50%) var(--y, 50%), rgb(244 114 182 / 0.35), transparent 70%),
    linear-gradient(135deg, #1e1b4b, #312e81);
}

/* JavaScript:
   panel.addEventListener("pointermove", (e) => {
     const r = panel.getBoundingClientRect();
     panel.style.setProperty("--x", `${e.clientX - r.left}px`);
     panel.style.setProperty("--y", `${e.clientY - r.top}px`);
   });
*/

Cómo elegir una técnica

Para degradados que se mueven solos en lugar de al pasar el cursor, consulta degradados animados en CSS. Para el panorama más amplio de lo que cuesta tiempo de pintado, rendimiento de los degradados CSS.

Pantallas táctiles y movimiento reducido

@media (hover: hover) {
  .btn:hover { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

Los efectos hover dan vida a una web. En los posts de redes no hay puntero, así que el movimiento tiene que vivir en el propio diseño. Los Marks de Gradiently pueden llevar su propio movimiento suave, y con Pro un diseño se exporta en MP4, WebM o GIF donde el navegador admite la grabación, listo para una story o un post.