Testo sfumato in Tailwind: classi, sintassi v4 e soluzioni

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.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

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: background-clip: text con un riempimento trasparente.

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 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.

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.

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.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

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 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.

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-*.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

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.

Tenere leggibile il testo sfumato

1. 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. 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à ha le regole complete.

3. 3

   Usa il peso

   Le sfumature si leggono meglio nei pesi grassetto ed extra, dove c’è più riempimento per mostrare il colore.

4. 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.