Per creare un effetto di testo sfumato con CSS puoi utilizzare la proprietà “background-clip” insieme a un gradiente lineare. Ecco un esempio:
HTML:
```
CSS:
```
h1.sfumato {
font-size: 60px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
```
In questo esempio il testo cambio dal rosso al blu.
Nel codice CSS, la proprietà “linear-gradient” crea un sfondo a gradiente per il testo che va dal rosso al blu. La proprietà “-webkit-background-clip: text;” serve a mascherare lo sfondo solo dietro al testo, e “-webkit-text-fill-color: transparent;” rende il colore del testo trasparente, in modo da vedere solo lo sfondo a gradiente.
Da notare che queste proprietà funzionano solo su browser webkit come Safari e Chrome.
Se si desidera un fallback per i browser che non supportano queste proprietà, è possibile duplicare l’elemento di testo e sovrapporlo, con uno sfumato e uno no. Il testo sfumato apparirà solo se il browser supporta le proprietà utilizzate.
