Effetto hover con gradiente CSS: quattro modi per animarlo

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.

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

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.

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

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

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

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.

Entrambe le tecniche viste finora funzionano anche sul testo a gradiente. 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.

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

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.

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

Scegliere una tecnica

Per i gradienti che si muovono da soli e non al passaggio del mouse, vedi i gradienti animati in CSS. Per il quadro più ampio di ciò che costa tempo di disegno, vedi le prestazioni dei gradienti CSS.

Schermi touch e movimento ridotto

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

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

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.