# Efecto hover con degradado en CSS: cuatro formas de animarlo

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

Escribe un degradado nuevo en :hover y salta en lugar de suavizarse. Los navegadores no pueden pasar de un degradado a otro, pero sí moverlo, fundirlo o animar sus colores. Aquí tienes cada método, con el código.

## The short version

- Un efecto hover con degradado en CSS no se consigue con una transición de background-image, porque los navegadores cambian los degradados al instante en lugar de interpolarlos.
- La técnica más compatible es un degradado sobredimensionado con una transición de background-position, que desliza los colores nuevos hasta la vista.
- Registrar las paradas de color o los ángulos con @property permite que el navegador los anime con suavidad, y funciona en todos los navegadores principales actuales.
- Fundir la opacidad de un segundo degradado en un pseudoelemento es la técnica más barata de renderizar, porque los cambios de opacidad no repintan.
- Los efectos hover deberían ir dentro de una media query hover y respetar prefers-reduced-motion.

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.

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

La línea de transition se ignora con los degradados. Todas las técnicas de abajo lo esquivan.

- Estado en reposo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`
- Estado hover: `linear-gradient(135deg, #6d28d9 0%, #f472b6 100%)`

Los dos estados que se usan en los ejemplos. El objetivo es un recorrido suave de la muestra izquierda a la derecha.

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

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

En reposo ves la mitad izquierda, de índigo a violeta. Al pasar el cursor, la mitad derecha, de violeta a rosa, se desliza a su sitio.

La franja completa al 200%: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`

Este es el fondo entero. El botón solo muestra la mitad cada vez.

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](https://gradiently.design/es/guide/css-gradient-button) 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](https://gradiently.design/es/guide/css-property-animation).

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

Cada parada se suaviza por su cuenta. Dales duraciones distintas y el color parecerá fluir de una esquina a la otra.

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](https://gradiently.design/es/guide/css-gradient-border).

Las dos técnicas vistas hasta aquí también funcionan con [texto con degradado](https://gradiently.design/es/guide/css-gradient-text). 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.

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

`z-index: -1` con `isolation: isolate` mantiene el pseudoelemento detrás del texto de la tarjeta pero por encima de su degradado base.

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

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

El brillo es una capa superior sobre una base oscura. Actualizar dos propiedades personalizadas es barato, pero cada movimiento repinta, así que úsalo en unos pocos paneles, no en todas las tarjetas de una página.

## Cómo elegir una técnica

| Técnica | Se ve como | Coste de renderizado | Ideal para |
| --- | --- | --- | --- |
| Deslizar con background-position | Un barrido de color nuevo | Repinta durante la transición | Botones, enlaces, etiquetas |
| Paradas de color con @property | Colores que cambian en el sitio | Repinta durante la transición | Tarjetas, insignias, bordes |
| Fundido de opacidad | Un degradado que se disuelve en otro | Compuesto, sin repintado | Paneles grandes, cuadrículas largas |
| Brillo que sigue al cursor | Luz que sigue al puntero | Repinta en cada movimiento | Unos pocos paneles destacados |

Ante la duda, funde. Es lo más barato y funciona en todas partes.

Para degradados que se mueven solos en lugar de al pasar el cursor, consulta [degradados animados en CSS](https://gradiently.design/es/guide/css-animated-gradient). Para el panorama más amplio de lo que cuesta tiempo de pintado, [rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance).

## Pantallas táctiles y movimiento reducido

### Evita

- Estilos hover que se quedan pegados tras tocar en el móvil
- Información que solo aparece al pasar el cursor
- Animaciones hover largas y en bucle
- Ignorar el ajuste de movimiento reducido

### Haz

- Envuelve las reglas hover en `@media (hover: hover)`
- Muestra el mismo estado en `:active` para pantallas táctiles
- Mantén las transiciones entre 200 y 500ms
- Quita el movimiento con `prefers-reduced-motion` y conserva el cambio de color

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

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

El color sigue cambiando para todos; solo se quita el movimiento a quien pidió menos.

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.

## FAQ

### ¿Se puede animar un degradado CSS al pasar el cursor?

No directamente. `background-image` cambia al instante. Anima `background-position` en un degradado sobredimensionado, anima paradas registradas con `@property` o funde la opacidad de un segundo degradado.

### ¿Cómo hago que un botón con degradado cambie de color con suavidad al pasar el cursor?

Usa `background-size: 200% 100%` con un degradado de tres paradas y anima `background-position` de `0% 50%` a `100% 50%` en hover.

### ¿@property funciona en todos los navegadores?

Funciona en las versiones actuales de Chrome, Edge, Safari y Firefox. Los navegadores antiguos saltan entre estados en lugar de suavizar.

### ¿Cuál es el efecto hover con degradado de mejor rendimiento?

Un fundido de opacidad: el degradado del hover va en un pseudoelemento y solo cambia su opacidad, lo que evita repintar.

### ¿Los efectos hover con degradado deben respetar el movimiento reducido?

Sí. Con `prefers-reduced-motion: reduce`, quita el movimiento y deja un cambio de color sencillo.