Perché i gradient CSS sono ancora sottoutilizzati
I gradient sono stati introdotti in CSS3 (2009) ma il loro pieno potenziale è raramente sfruttato. I tre tipi risolvono problemi visivi fondamentalmente diversi:
linear-gradient()— transizioni direzionali lungo una linea retta, controllate da un angolo o da una direzione nominale.radial-gradient()— transizioni che si irradiano da un punto centrale verso l'esterno in forma circolare o ellittica.conic-gradient()— transizioni che ruotano attorno a un punto centrale come le lancette di un orologio — ideali per torte, ruote cromatiche e pattern angolari.
Tutti e tre condividono la stessa sintassi dei color stop ma differiscono nella geometria. Una volta compreso il modello sottostante, passare da uno all'altro diventa intuitivo.
linear-gradient: le basi
Un gradient lineare fa transitare i colori lungo una linea retta definita da una direzione e uno o più color stop. Tutti gli altri tipi di gradient si basano sulla sintassi dei color stop introdotta qui.
Sintassi
L'argomento direzione controlla l'angolo della linea del gradient:
| Valore | Angolo | Direzione |
|---|---|---|
| to bottom | 180deg | Su a Giù (default) |
| to right | 90deg | Sinistra a Destra |
| to bottom right | 135deg | Alto-sinistra a Basso-destra |
| 45deg | 45deg | Basso-sinistra a Alto-destra |
| 0.25turn | 90deg | Sinistra a Destra (unità turn) |
Color stop: posizioni, lunghezze e transizioni nette
Ogni color stop accetta una posizione opzionale (percentuale o lunghezza). Omettendo le posizioni, i stop vengono distribuiti uniformemente. Le transizioni nette si creano mettendo due stop nella stessa posizione:
Puoi anche specificare uno stop con due posizioni: red 20% 40% equivale a red 20%, red 40%.
Il color hint: controllo del punto medio
Tra due color stop si può inserire una percentuale senza colore — il color hint. Sposta il punto medio dell'interpolazione. Un hint al 20% avvicina il midpoint al primo stop.
repeating-linear-gradient
repeating-linear-gradient() affianca il pattern del gradient all'infinito. L'ultimo color stop deve specificare una lunghezza esplicita (non 100%).
radial-gradient: cerchi ed ellissi
Un gradient radiale si irradia da un punto centrale. Per default crea un'ellisse che tocca tutti e quattro i lati del contenitore.
Sintassi
Il primo argomento è opzionale e controlla forma e dimensione. La parte at <posizione> sposta il punto centrale.
Forma e parole chiave di dimensionamento
La parola chiave di dimensione definisce dove termina il gradient:
farthest-corner(default) — il gradient si estende all'angolo più lontano della box.closest-corner— termina all'angolo più vicino.farthest-side— termina al lato più lontano.closest-side— termina al lato più vicino.
Posizionamento del centro
La parola chiave at accetta qualsiasi valore CSS position valido: parole chiave come top left, percentuali o lunghezze.
conic-gradient: il nuovo arrivato
conic-gradient() è stato l'ultimo tipo di gradient a essere supportato dai browser. A differenza di linear e radial, le sue transizioni di colore ruotano attorno a un punto centrale.
Sintassi
L'argomento <code>from <angolo></code> ruota l'angolo di partenza. <code>at <posizione></code> sposta il centro.
A cosa servono davvero i conic gradient
- Grafici a torta — ogni segmento è una coppia di color stop a percentuali consecutive.
- Ruote cromatiche — un singolo gradient a giro completo da hsl(0deg) a hsl(360deg).
- Pattern angolari — scacchiere, turbine e strisce angolari con repeating-conic-gradient.
- Anelli di progresso — con border-radius: 50% crea un indicatore circolare pulito.
repeating-conic-gradient
repeating-conic-gradient() affianca il pattern angolare. Le transizioni nette creano forme geometriche nette.
Pattern avanzati
Queste tecniche vanno oltre l'uso standard dei gradient.
Sfondi striati
I gradient lineari a stop netti con background-size creano strisce CSS scalabili. Usa repeating-linear-gradient per codice più pulito.
Gradient text
Richiede: gradient come background, -webkit-background-clip: text, color: transparent.
Mesh gradient
Sovrappone più radial gradient con endpoint trasparente su un colore base. Usa il PixCode Color Palette Generator per colori armonici.
Scacchiera con conic-gradient
La scacchiera più pulita: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) con background-size.
Confronto diretto
| Caratteristica | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Modello di direzione | Linea retta (angolo) | Radiale da punto centrale | Rotazione angolare |
| Variante repeating | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| Supporto color hint | Sì | Sì | Sì |
| Parola chiave inset | No | No | No |
| Casi d'uso tipici | Sfondi, bottoni, testo | Spotlight, glow, vignette | Torte, ruote, scacchiere |
Considerazioni sulle performance
I gradient CSS sono rasterizzati dalla GPU e memorizzati in cache. In generale sono poco costosi ma alcuni pattern causano repaint:
Gradient statici su elementi non animati. Gradient come background-image. Gradient repeating.
Animare i color stop direttamente. Superfici grandi con molti radial gradient sovrapposti. Gradient text su testo piccolo.
Non animare mai background o background-image direttamente. Applica il gradient a uno pseudo-elemento e anima la sua opacity o transform.
Accessibilità e contrasto
I gradient creano contrasto variabile. Il testo deve rispettare WCAG AA in ogni punto della superficie.
Verifica il contrasto nel punto più chiaro del gradient. Usa un overlay scuro semi-trasparente (background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%)) per garantire la leggibilità.