Testo a gradiente in CSS, fatto bene

Il testo a gradiente in CSS si ottiene dipingendo un gradiente come sfondo dell’elemento di testo, ritagliando quello sfondo sulle forme delle lettere con background-clip: text e rendendo trasparente il testo stesso così il gradiente traspare. Bastano tre dichiarazioni, funziona in ogni browser attuale e resta testo vero, selezionabile e ricercabile, non un’immagine.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Il resto di questa guida spiega cosa sbaglia la versione in tre righe: alternative di riserva mancanti, contrasto, testo su più righe, discendenti tagliati e la domanda di design su quando il testo a gradiente aiuta davvero. Per l’aspetto delle lettere a gradiente nei social e nel lavoro sul brand, e non sul web, vedi gli effetti per il testo.

Una ricetta robusta per il testo a gradiente con alternative di riserva

Se un browser applica color: transparent ma non il ritaglio, il testo sparisce. Proteggiti: dai all’elemento un colore pieno preso dal gradiente, poi passa alla versione trasparente solo quando il browser conferma il supporto. Aggiungi un ripristino per la modalità colori forzati, dove il sistema sostituisce i tuoi colori e il testo deve restare visibile.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

La pagina MDN su background-clip documenta il valore text e il suo supporto attuale.

Contrasto: controlla entrambi gli estremi del gradiente

Un verificatore di contrasto prende un solo colore di testo, ma il testo a gradiente ne ha molti. Le parole sono leggibili quanto la loro parte più debole, quindi controlla il punto più chiaro e quello più scuro rispetto allo sfondo, e guarda anche il centro, perché una sfumatura sRGB può scendere più chiara o più spenta di entrambi gli estremi. Per il testo grande da titolo le WCAG chiedono almeno 3:1; per il testo normale, 4,5:1. Il contrasto dei colori spiega i rapporti.

Correggere il testo a gradiente su più righe e le lettere tagliate

Su un elemento inline che va a capo, il browser stende un solo sfondo su tutte le righe come fossero un’unica striscia, quindi la prima riga riceve l’inizio del gradiente e l’ultima la fine. Di solito vuoi che ogni riga porti il gradiente completo. box-decoration-break: clone lo fa. Sugli elementi a blocco, come un titolo, il gradiente copre già l’intero riquadro, quindi un lungo gradiente su un titolo largo può mostrare solo la sua parte centrale sulle righe corte.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

I discendenti tagliati sono l’altra sorpresa. Lo sfondo dipinge solo il riquadro dell’elemento, quindi con un line-height molto stretto, le parti delle lettere che pendono sotto restano trasparenti e spariscono. Un’altezza di riga di circa 1,1 o un po’ di padding in basso lo risolve. I caratteri corsivi da titolo possono perdere per lo stesso motivo la punta dell’ultima lettera a destra; un tocco di padding inline aiuta.

Quando il testo a gradiente funziona, e quando no

Una buona regola: il testo a gradiente è un accento, come il corsivo. Una parola evidenziata in un titolo attira l’occhio; un intero paragrafo lo stanca. I pesi forti aiutano, perché i tratti sottili non mostrano abbastanza colore da leggersi come un gradiente. Se il resto della pagina usa già sfondi a gradiente, i caratteri piatti sono di solito la scelta più forte; il testo su sfondi a gradiente tratta questo caso.

Animare il testo a gradiente

Per far scorrere il colore attraverso le lettere, rendi lo sfondo più grande del testo e spostalo. Dagli il 200% di larghezza e anima background-position avanti e indietro con alternate, così non c’è mai un salto quando il ciclo riparte. Rispetta le impostazioni di movimento ridotto e mantienilo lento: un luccichio ogni qualche secondo sembra rifinitura, un ciclo veloce sembra un avvertimento.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

Gli stessi trucchi sugli sfondi alimentano più in generale i gradienti animati in CSS, e i contorni a gradiente invece dei riempimenti sono trattati nei bordi a gradiente in CSS.