# Testo sfumato in Tailwind: classi, sintassi v4 e soluzioni
[Canonical HTML page](https://gradiently.design/it/guide/tailwind-gradient-text)
Quattro utility trasformano un titolo in testo sfumato. I dettagli intorno decidono se sarà nitido o tagliato. Ecco le classi per Tailwind v4 e v3 e i problemi che incontrerai.
## The short version
- Il testo sfumato in Tailwind richiede uno sfondo sfumato, `bg-clip-text` per ritagliarlo sulle lettere e `text-transparent` perché lo sfondo si veda attraverso.
- In Tailwind v4 l’utility per la sfumatura è `bg-linear-to-r`, mentre la v3 usa `bg-gradient-to-r`; le classi di colore from, via e to funzionano allo stesso modo in entrambe.
- Tailwind v4 permette di scegliere lo spazio di interpolazione con un modificatore come `bg-linear-to-r/oklch`, che mantiene luminoso il punto centrale della sfumatura.
- Aggiungi `box-decoration-clone` quando un titolo sfumato va a capo su più righe, e un po’ di padding inferiore quando le discendenti vengono tagliate.
- Controlla il contrasto del colore più chiaro della sfumatura rispetto alla pagina, perché è lì che il testo sfumato diventa difficile da leggere.
Per creare **testo sfumato in Tailwind**, applica una sfumatura all’elemento e ritagliala sulle lettere: `bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent`. La prima parte dipinge uno sfondo sfumato, `bg-clip-text` lo ritaglia sulla forma dei glifi e `text-transparent` toglie il colore pieno del testo così la sfumatura si vede attraverso. In Tailwind v3 scrivi `bg-gradient-to-r` invece di `bg-linear-to-r`; il resto è identico.
```html
Ship the quiet version
```
Tutto l’effetto in un solo elenco di classi. L’ordine dentro l’attributo class non conta.
## Come lavorano insieme le classi
Aiuta sapere a cosa si compila ogni utility, perché ogni bug del testo sfumato nasce dalla mancanza di una delle quattro parti. Sotto il cofano è la stessa tecnica del semplice [testo sfumato in CSS](https://gradiently.design/it/guide/css-gradient-text): `background-clip: text` con un riempimento trasparente.
| Utility | Cosa imposta | Se la dimentichi |
| --- | --- | --- |
| `bg-linear-to-r` | Una sfumatura lineare verso destra | Nessuna sfumatura |
| `from-*` `via-*` `to-*` | I punti di colore | Punti trasparenti o predefiniti |
| `bg-clip-text` | `background-clip: text` | Un riquadro colorato dietro il testo pieno |
| `text-transparent` | `color: transparent` | Il testo pieno copre la sfumatura |
Le quattro parti del testo sfumato in Tailwind e il sintomo che lascia ciascuna quando manca.
Le direzioni seguono i soliti suffissi: `-to-r`, `-to-br`, `-to-b` e così via. La versione 4 accetta anche un angolo, come `bg-linear-45` o `bg-linear-135`, e aggiunge `bg-radial` e `bg-conic`, che funzionano anche per il testo. Se non hai usato molto le utility per le sfumature, [le sfumature in Tailwind](https://gradiently.design/it/guide/tailwind-gradient) tratta gli sfondi in profondità.
## I nomi delle classi in Tailwind v4 e v3
Il cambiamento più grande della v4 è il nome dell’utility lineare. `bg-gradient-to-r` è diventata `bg-linear-to-r`, per affiancare le nuove utility radiali e coniche. Il vecchio nome si compila ancora nella v4 per compatibilità, ma il nuovo codice dovrebbe usare quello nuovo.
| Cosa vuoi | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Da sinistra a destra | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonale | `bg-linear-to-br` o `bg-linear-45` | `bg-gradient-to-br` |
| Radiale | `bg-radial` | Solo valore arbitrario |
| Conica | `bg-conic` | Solo valore arbitrario |
| Miscela OKLCH | `bg-linear-to-r/oklch` | Non disponibile |
| Ritaglio sul testo | `bg-clip-text` | `bg-clip-text` |
Affiancate, così capisci per quale versione è stato scritto uno snippet trovato online.
## Esempi di testo sfumato da copiare
Tre o quattro colori vicini sulla ruota danno il testo sfumato più pulito. I colori opposti risultano rumorosi e possono diventare grigi al centro. Queste combinazioni usano colori della palette predefinita, descritta in [i colori Tailwind](https://gradiently.design/it/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Ogni etichetta elenca i punti in ordine: il primo va in `from-*`, uno intermedio in `via-*`, l’ultimo in `to-*`. Le tonalità 600 mantengono abbastanza contrasto su una pagina bianca; su una pagina scura passa a 300 o 400. I valori hex sono quelli della palette v3; le versioni OKLCH della v4 sono molto simili.
Le posizioni dei punti spostano dove sta ogni colore. `from-20% via-50% to-80%` mantiene colore pieno a entrambe le estremità di un titolo lungo, il che appare più calmo di una miscela che parte dalla prima lettera.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Posizioni dei punti, un modificatore di interpolazione e una sfumatura del tutto personalizzata. I valori arbitrari funzionano nella v3 e nella v4.
Dal blu al giallo è un buon test dell’interpolazione. Miscelato in sRGB passa per un verde grigiastro; miscelato in OKLCH resta vivido. [Le sfumature CSS in OKLCH](https://gradiently.design/it/guide/css-gradient-oklch) spiega perché.
## Risolvere i problemi comuni del testo sfumato
### Titoli su più righe
Per impostazione predefinita la sfumatura copre l’intero riquadro dell’elemento, quindi un titolo che va a capo riceve un’unica sfumatura allungata con la seconda riga di un colore diverso dalla prima. Aggiungi `box-decoration-clone` per dare a ogni riga la sua sfumatura completa, oppure `inline-block` per restringere il riquadro al testo.
### Discendenti tagliate
Un’interlinea stretta come `leading-none` può tagliare la parte bassa di una g o di una y, perché lo sfondo finisce al riquadro della riga. Aggiungi `pb-1` o allarga un po’ l’interlinea.
### Modalità scura
Una sfumatura tarata per la carta bianca appare spenta su una pagina scura. Dagli le sue tonalità con le varianti: `from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300`. Lo stesso ragionamento vale per gli sfondi, trattati in [sfumature per la modalità scura](https://gradiently.design/it/guide/dark-mode-gradients).
### Da evitare
- Testo sfumato su paragrafi lunghi
- Un punto chiaro che svanisce sul bianco
- Colori complementari con il centro grigio
- Testo sfumato sopra uno sfondo sfumato
- Non prevedere un colore pieno per il testo selezionato
### Da fare
- Riservalo a un titolo o a una sola parola
- Controlla il punto più chiaro rispetto alla pagina
- Tinte vicine, oppure interpolazione OKLCH
- Fondo pieno dietro le parole sfumate
- Imposta `selection:text-white selection:bg-violet-600`
## Animare il testo sfumato in Tailwind
Un lento luccichio nasce da uno sfondo largo il doppio del testo che scorre di lato. Nella v4, definisci l’animazione dentro `@theme` e diventa un’utility `animate-*`.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Poi aggiungi `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` al titolo, e ripeti il primo colore come ultimo punto così il ciclo non ha scatti.
Usalo al massimo una volta per pagina. Il movimento attira l’occhio, il che è lo scopo per il titolo di un lancio e un fastidio ovunque altro. Lo schema è lo stesso usato nelle [sfumature CSS animate](https://gradiently.design/it/guide/css-animated-gradient).
## Tenere leggibile il testo sfumato
1. **Trova il punto più debole** Il colore più chiaro su una pagina chiara, o il più scuro su una pagina scura, fissa il contrasto che ottieni davvero.
2. **Provalo come un testo normale** I titoli grandi e in grassetto richiedono almeno 3:1 rispetto alla pagina secondo le WCAG. [Contrasto dei colori e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) ha le regole complete.
3. **Usa il peso** Le sfumature si leggono meglio nei pesi grassetto ed extra, dove c’è più riempimento per mostrare il colore.
4. **Fermati a poche parole** Un titolo o una sola parola enfatizzata. Qualsiasi cosa più lunga comincia a sembrare un errore di rendering.
Il testo sfumato è una tecnica web. Quando il lavoro è un post social o un banner e vuoi la sfumatura dietro le parole, i Mark di Gradiently spostano la loro zona più calma dietro il testo e scelgono inchiostro chiaro o scuro riga per riga, così le parole si leggono senza che tu debba provare ogni punto.
## FAQ
### Come creo testo sfumato in Tailwind?
Aggiungi una sfumatura con `bg-linear-to-r` (o `bg-gradient-to-r` nella v3), i punti di colore con `from-*` e `to-*`, poi `bg-clip-text` e `text-transparent`.
### Perché il mio testo sfumato in Tailwind non si vede?
Di solito manca `text-transparent`, quindi il testo pieno copre la sfumatura, oppure manca `bg-clip-text`, quindi la sfumatura riempie un riquadro dietro le parole. Controlla che tutte e quattro le parti siano sullo stesso elemento.
### Cosa ha sostituito bg-gradient-to-r in Tailwind v4?
L’utility lineare ora è `bg-linear-to-r`. Il vecchio nome funziona ancora per compatibilità, e la v4 aggiunge `bg-radial`, `bg-conic` e utility per l’angolo come `bg-linear-45`.
### Come evito che il testo sfumato tagli lettere come g e y?
Aggiungi un po’ di padding inferiore come `pb-1`, o allarga l’interlinea, perché lo sfondo ritagliato finisce al riquadro della riga.
### Il testo sfumato è accessibile?
Può esserlo, se ogni parte della sfumatura rispetta i requisiti di contrasto rispetto alla pagina. Prova il punto più chiaro e limita il testo sfumato ai titoli.