Come funziona il testo con gradiente in CSS?

CSS non dispone di una proprietà «gradiente del testo». Il trucco più comune consiste nell'applicare un gradiente come sfondo dell'elemento, ritagliare lo sfondo seguendo la forma delle lettere con background-clip: text e rendere trasparente il riempimento del testo, così da lasciare intravedere il gradiente.

Descrizione dello strumento

Inserisci il testo, scegli un colore iniziale e uno finale e imposta l'angolo: lo strumento mostra un'anteprima in tempo reale e fornisce il CSS da copiare. Puoi anche modificare la famiglia, il peso e la dimensione del carattere, così da far corrispondere l'anteprima a ciò che userai nella tua pagina.

La regola generata è simile a questa:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

L'output effettivo include anche le impostazioni del carattere e le regole per l'a capo.

Funzionalità

  • Gradiente lineare a due colori con un angolo da 0 a 360 gradi
  • Controlli per la famiglia, il peso e la dimensione del carattere
  • Anteprima in tempo reale esportabile come immagine, oltre a CSS pronto da incollare