# Effetto hover con gradiente CSS: quattro modi per animarlo

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

Scrivi un nuovo gradiente in :hover e scatta invece di scorrere. I browser non sanno animare un gradiente in un altro, ma possono spostarne uno, dissolverne uno o animare i colori al suo interno. Ecco ogni metodo, con il codice.

## The short version

- Un effetto hover con gradiente CSS non si ottiene con una transizione su background-image, perché i browser sostituiscono i gradienti all’istante invece di interpolarli.
- La tecnica più compatibile è un gradiente sovradimensionato con una transizione su background-position, che fa scorrere nuovi colori nella vista.
- Registrare gli stop di colore o gli angoli con @property permette al browser di animarli con fluidità e funziona in tutti i principali browser attuali.
- Sfumare l’opacità di un secondo gradiente su uno pseudo-elemento è la tecnica più economica da disegnare, perché i cambi di opacità non ridisegnano.
- Gli effetti hover vanno dentro una media query hover e devono rispettare prefers-reduced-motion.

Un **effetto hover con gradiente CSS** richiede un espediente, perché i browser non animano `background-image`: cambia il gradiente in `:hover` e scatta. Quattro tecniche danno un risultato fluido. Far scorrere un gradiente sovradimensionato con `background-position`, animare gli stop registrati con `@property`, dissolvere un secondo gradiente su uno pseudo-elemento, oppure muovere un alone radiale con il cursore. Ognuna si adatta a elementi diversi, e qui sotto trovi tutte con il codice.

## Perché transition non funziona sui gradienti

Per il browser un gradiente è un’immagine. Sa interpolare un numero o un colore, ma non un’immagine in un’altra, quindi `background-image` non viene interpolata e il nuovo gradiente sostituisce il vecchio all’istante. Le proprietà personalizzate usate dentro il gradiente si comportano allo stesso modo se non le registri, perché una proprietà non registrata è solo testo.

```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 riga transition viene ignorata per i gradienti. Ogni tecnica qui sotto aggira il problema.

- Stato di riposo: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`
- Stato hover: `linear-gradient(135deg, #6d28d9 0%, #f472b6 100%)`

I due stati usati negli esempi. L’obiettivo è un passaggio fluido dal campione di sinistra a quello di destra.

## Tecnica 1: far scorrere un gradiente sovradimensionato

Rendi lo sfondo più grande dell’elemento, dipingi dentro entrambi gli stati e poi spostalo. `background-position` si può animare, quindi i nuovi colori scivolano dentro. Funziona in ogni browser e non richiede registrazione.

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

A riposo vedi la metà sinistra, da indaco a viola. Al passaggio del mouse la metà destra, da viola a rosa, scivola al suo posto.

L’intera striscia al 200%: `linear-gradient(90deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`

Questo è lo sfondo intero. Il pulsante ne mostra sempre solo metà alla volta.

Il movimento si legge come un passaggio, adatto a pulsanti e link. È meno convincente sulle schede grandi, dove si vede il gradiente viaggiare. Animare `background-position` ridisegna, e va bene per elementi piccoli; per una superficie grande usa la tecnica 3. [Pulsanti a gradiente in CSS](https://gradiently.design/it/guide/css-gradient-button) ha altri schemi di pulsanti costruiti su questa idea.

## Tecnica 2: animare gli stop di colore con @property

Registra i colori degli stop come proprietà personalizzate tipizzate e il browser potrà interpolarli. Il gradiente cambia allora colore sul posto, senza scorrere. `@property` funziona in tutti i principali browser attuali; quelli più vecchi scattano e basta, un ripiego accettabile per un hover. Le regole di registrazione sono spiegate in [CSS @property](https://gradiently.design/it/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;
}
```

Ogni stop scorre in modo indipendente. Dai loro durate diverse e il colore sembra fluire da un angolo all’altro.

Lo stesso trucco anima l’angolo. Registra `--angle` con `syntax: "<angle>"`, usala in `linear-gradient(var(--angle), ...)` e cambiala al passaggio del mouse: un gradiente che ruota da 135 a 225 gradi quando arriva il puntatore è un tocco sottile e curato per schede e [bordi a gradiente](https://gradiently.design/it/guide/css-gradient-border).

Entrambe le tecniche viste finora funzionano anche sul [testo a gradiente](https://gradiently.design/it/guide/css-gradient-text). Il testo ritagliato con `background-clip: text` mostra ciò che fa lo sfondo, quindi uno scorrimento o una transizione degli stop su un titolo fa correre il colore attraverso le lettere al passaggio del mouse. Mantieni il cambiamento delicato sui titoli che le persone devono leggere e verifica che entrambi gli stati rispettino il contrasto con la pagina.

## Tecnica 3: dissolvenza incrociata di due gradienti

Metti il gradiente hover su uno pseudo-elemento sopra la base e sfuma la sua opacità. I cambi di opacità sono gestiti dal compositor senza ridisegnare, quindi è la scelta più fluida per schede grandi, pannelli hero e qualsiasi elemento in una lunga griglia.

```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` tiene lo pseudo-elemento dietro il testo della tessera ma sopra il suo gradiente di base.

## Tecnica 4: un alone che segue il cursore

Un gradiente radiale posizionato con proprietà personalizzate può seguire il puntatore. Imposta `--x` e `--y` con un piccolo script e la luce si muove con la mano. Mantienila morbida e lontana dal testo: deve sembrare luce su una superficie, mai un’aureola intorno alle parole.

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

L’alone è un livello superiore su una base scura. Aggiornare due proprietà personalizzate costa poco, ma ogni movimento ridisegna, quindi usalo su pochi pannelli, non su ogni scheda di una pagina.

## Scegliere una tecnica

| Tecnica | Aspetto | Costo di rendering | Ideale per |
| --- | --- | --- | --- |
| Scorrimento con background-position | Un passaggio di nuovo colore | Ridisegna durante la transizione | Pulsanti, link, tag |
| Stop di colore con @property | Colori che cambiano sul posto | Ridisegna durante la transizione | Schede, badge, bordi |
| Dissolvenza di opacità | Un gradiente che si dissolve in un altro | Composto, nessun ridisegno | Pannelli grandi, lunghe griglie |
| Alone del cursore | Luce che segue il puntatore | Ridisegna a ogni movimento | Pochi pannelli di rilievo |

Nel dubbio, dissolvi. È la più economica e funziona ovunque.

Per i gradienti che si muovono da soli e non al passaggio del mouse, vedi i [gradienti animati in CSS](https://gradiently.design/it/guide/css-animated-gradient). Per il quadro più ampio di ciò che costa tempo di disegno, vedi le [prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance).

## Schermi touch e movimento ridotto

### Da evitare

- Stili hover che restano dopo un tocco sul telefono
- Informazioni che compaiono solo al passaggio del mouse
- Animazioni hover lunghe e in loop
- Ignorare l’impostazione di movimento ridotto

### Da fare

- Racchiudere le regole hover in `@media (hover: hover)`
- Mostrare lo stesso stato su `:active` per il touch
- Tenere le transizioni tra 200 e 500 ms
- Eliminare il movimento con `prefers-reduced-motion`, mantenendo il cambio di colore

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

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

Il colore cambia comunque per tutti; si toglie solo il movimento a chi ha chiesto meno animazioni.

Gli effetti hover danno vita a un sito web. Sui post social non c’è il puntatore, quindi il movimento deve stare nel design stesso. I Mark di Gradiently possono avere un loro movimento delicato e, con Pro, un design si esporta in MP4, WebM o GIF dove il browser supporta la registrazione, pronto per una storia o un post.

## FAQ

### Si può animare un gradiente CSS al passaggio del mouse?

Non direttamente. `background-image` cambia all’istante. Anima `background-position` su un gradiente sovradimensionato, anima gli stop registrati con `@property`, oppure sfuma l’opacità di un secondo gradiente.

### Come faccio cambiare colore con fluidità a un pulsante con gradiente?

Usa `background-size: 200% 100%` con un gradiente a tre stop, poi anima `background-position` da `0% 50%` a `100% 50%` al passaggio del mouse.

### @property funziona in tutti i browser?

Funziona nelle versioni attuali di Chrome, Edge, Safari e Firefox. I browser più vecchi scattano tra gli stati invece di scorrere.

### Qual è l’effetto hover con gradiente più performante?

La dissolvenza di opacità: il gradiente hover sta su uno pseudo-elemento e cambia solo la sua opacità, evitando il ridisegno.

### Gli effetti hover con gradiente devono rispettare il movimento ridotto?

Sì. Con `prefers-reduced-motion: reduce` togli il movimento e mantieni un semplice cambio di colore.