Toolzi LogoToolzi

Generatore di Testo con Sfumatura CSS

Genera effetti di testo con sfumatura CSS istantaneamente. Personalizza colori e direzione, anteprima dal vivo e copia il codice CSS.

0%
100%

Anteprima

Hello World
48px

Codice CSS

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Cos'è il testo con sfumatura CSS?

Il testo con sfumatura CSS applica un gradiente di colore al testo usando un gradiente come sfondo dell'elemento e ritagliandolo alla forma del testo con background-clip: text. Questa tecnica crea tipografia accattivante senza immagini.

Come applicare la sfumatura al testo in CSS

Imposta uno sfondo sfumato sull'elemento, poi applica -webkit-background-clip: text e -webkit-text-fill-color: transparent. La proprietà background-clip: text ritaglia lo sfondo al testo, rivelando la sfumatura attraverso le lettere.

Compatibilità Browser

-webkit-background-clip: text è supportato da tutti i browser moderni inclusi Chrome, Firefox, Safari ed Edge. La proprietà standard background-clip: text è anch'essa ben supportata. Includi sempre entrambe le versioni per una copertura completa.

Domande Frequenti

Come creo testo con sfumatura in CSS?
Applica una sfumatura come sfondo, poi usa -webkit-background-clip: text e -webkit-text-fill-color: transparent per mostrare la sfumatura attraverso il testo.
Il testo con sfumatura CSS funziona in tutti i browser?
Sì. -webkit-background-clip: text è supportato da tutti i browser moderni inclusi Chrome, Firefox, Safari ed Edge.
Posso usare sfumature radiali o coniche per il testo?
Sì. Qualsiasi tipo di sfumatura CSS (linear, radial, conic) può essere usato come sfondo per il testo sfumato.
Perché ho bisogno di -webkit-text-fill-color: transparent?
-webkit-text-fill-color sovrascrive il colore del testo nei browser WebKit. Impostarlo su transparent rende lo sfondo sfumato visibile attraverso il testo.
Posso animare il testo con sfumatura CSS?
Sì. Puoi animare background-position o usare CSS @keyframes con background-size per creare effetti di testo sfumato animati.
Qual è la differenza tra color e -webkit-text-fill-color?
-webkit-text-fill-color ha la precedenza su color nei browser che lo supportano, permettendo allo sfondo sfumato di essere visibile attraverso il testo.

Strumenti Correlati

CSS Gradient Generator →