Generatore di testo sfumato (CSS)
Scrivi il testo, scegli due o tre colori e l’angolo. L’anteprima mostra il risultato su sfondo chiaro e scuro.
Come si usaTitolo con colore sfumato
Disponibile in: 
Generatore di testo sfumato (CSS): a cosa serve
Un titolo con le lettere sfumate attira l’attenzione nella home e nelle landing page, ed è fatto solo con CSS: la sfumatura diventa lo sfondo del testo e background-clip: text ritaglia quello sfondo nella forma delle lettere.
Il generatore crea il codice con il prefisso -webkit-, un colore di riserva per i browser senza supporto, l’adattamento alla modalità di alto contrasto di Windows e, se vuoi, l’animazione della sfumatura che si ferma per chi preferisce meno animazioni. L’anteprima mostra il titolo su sfondo chiaro e scuro.
Come si usa
- Scrivi il testo e scegli font e dimensione.
- Scegli i colori e l’angolo.
- Copia il CSS e applica la classe al titolo.
Quando usarlo
- Titolo della home page.
- Evidenziazione di un prezzo o di una call to action.
- Logo testuale.
Domande frequenti
Come si fa il testo sfumato?
La sfumatura è lo sfondo dell’elemento, e la proprietà background-clip: text ritaglia quello sfondo nella forma delle lettere; il colore del testo diventa trasparente per far apparire lo sfondo. Funziona con qualsiasi font e il testo resta selezionabile e letto dagli screen reader.
Serve il prefisso -webkit-?
Il codice include -webkit-background-clip insieme alla versione senza prefisso, perché i browser un po’ più vecchi la accettano solo con il prefisso. Il colore di riserva compare dove nulla di tutto ciò funziona.
Si può usare nei paragrafi?
Funziona, ma è meglio riservarlo a titoli ed evidenziazioni brevi. Nel testo continuo la sfumatura stanca la lettura e le parti più chiare possono perdere contrasto con lo sfondo.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.