Un gradiente CSS sono due o più colori e una direzione, e il browser riempie tutto quello che sta in mezzo. È il riempimento la parte interessante, perché il modo predefinito in cui i browser interpolano il colore è la ragione per cui tanti gradienti sembrano più fangosi dei colori che ci hai messo dentro.
Gli angoli CSS non sono gli angoli della matematica
Frega chiunque abbia fatto un po' di trigonometria. In matematica, 0 gradi punta a destra e gli angoli crescono in senso antiorario. Nei gradienti CSS, 0deg punta in alto e gli angoli crescono in senso orario. Le due convenzioni sono ruotate di 90 gradi l'una rispetto all'altra e girano in versi opposti.
Quindi 90deg è verso destra, 180deg è verso il basso, 270deg è verso sinistra. Se un gradiente esce ruotato rispetto a quello che ti aspettavi, il motivo è quasi sempre questo — e il rimedio non è armeggiare col numero finché non sembra giusto, è sapere che il CSS parte dall'alto e gira come un orologio.
La sintassi con le parole chiave esiste per scavalcare tutta la faccenda: to right, to bottom left. Si legge meglio di un numero e non può essere confusa con niente, il che la rende la scelta migliore ogni volta che la direzione è una delle otto ovvie.
Il centro fangoso, e da dove viene
Metti un blu saturo e un giallo saturo in un gradiente e guarda cosa succede in mezzo: diventa grigio. Non un piacevole colore di transizione — una banda morta e slavata che nessuno dei due colori avrebbe fatto prevedere.
La causa è la stessa che fa sì che #808080 non sia luminoso la metà del bianco. Per default i browser interpolano i gradienti in sRGB, e i numeri sRGB non sono quantità di luce: sono codificati percettivamente. Farne la media è aritmetica sulla scala sbagliata, e atterra da qualche parte più scura e meno satura di quanto l'occhio si aspetti. Il punto medio di due colori vividi esce prosciugato.
Il CSS ora ti lascia dire dove interpolare. Scrivere linear-gradient(in oklch, blue, yellow) dice al browser di miscelare in uno spazio percettivo, e la banda fangosa semplicemente non compare: la transizione resta vivida per tutto il tragitto. È supportato da ogni browser attuale ed è la singola modifica che migliora di più un gradiente fatto di colori saturi. Questo strumento genera la sintassi standard; aggiungere "in oklch" dopo l'angolo è una modifica manuale che vale la pena fare.
Le bande sono aritmetica, non un bug di rendering
I gradienti sottili fanno le bande. Una sfumatura delicata su una sezione hero mostra strisce visibili, e nessuna regolazione dei colori la risolve. Il motivo è che otto bit per canale ti danno 256 valori, e un gradiente può usare solo i valori che esistono tra i suoi estremi.
Misuralo ed è netto. Un gradiente da #404040 a #484848 ha otto livelli di differenza con cui lavorare, e stenderlo su mille pixel produce nove tonalità distinte — nove gradini, ognuno largo oltre cento pixel. Quelle sono le bande. Non c'è precisione mancante da recuperare; i colori sono semplicemente così vicini.
I rimedi sono tutti aggiramenti. Sovrapponi una texture di rumore leggera, che spezza le regioni piatte in dithering e nasconde il confine. Usa una differenza di colore più ampia sulla stessa distanza. Oppure accettalo, dato che le bande sono molto meno visibili su una pagina affollata che su una vuota. Quello che non funziona è chiedere al browser di impegnarsi di più, perché è già al limite di ciò che il formato sa esprimere.
La trappola della trasparenza
Sfumare un colore verso il nulla si scrive come un gradiente da quel colore a transparent, e in Safari diventava grigio in mezzo — perché transparent veniva interpretato come rgba(0,0,0,0), un nero completamente trasparente, e miscelare verso quello trascinava tutto attraverso un nero invisibile lungo la strada.
I browser moderni interpolano in alfa premoltiplicato, il che lo risolve. Ma l'abitudine da tenere è dichiarare l'estremo esplicitamente: rgba(255,0,0,1) verso rgba(255,0,0,0) dice quello che intendi, non può essere frainteso da niente, e non si affida al browser che faccia la cosa giusta con una parola chiave.
Domande frequenti
Viene inviato qualcosa a un server?
No. Questo strumento è marcato "client": l'anteprima è il tuo browser che renderizza il CSS, e la regola è assemblata dai tuoi input nella pagina. Non viene trasmesso niente.
Perché il centro del mio gradiente sembra grigio?
Interpolazione in sRGB, descritta sopra. I due colori vengono mediati su una scala codificata percettivamente invece che lineare, il che fa atterrare il punto medio più scuro e più piatto del previsto. Aggiungi "in oklch" dopo l'angolo e sparisce: il browser miscela allora in uno spazio progettato esattamente per questo.
Come tolgo le strisce da un gradiente sottile?
Non puoi, non direttamente: vengono dall'avere solo 256 livelli per canale, e un gradiente sottile ne usa pochissimi. La risposta pratica è una sovrapposizione di rumore leggero, che sfuma i confini fino a renderli invisibili. È lo stesso trucco che la stampa usa da un secolo, ed è il motivo per cui tanti gradienti "morbidi" sui siti fatti bene hanno sopra una grana appena percettibile.
Lineare o radiale?
Lineare per qualsiasi cosa che si legga come una superficie: uno sfondo, un pulsante, una sezione. Radiale per qualsiasi cosa che si legga come una sorgente di luce o un punto focale, perché è a questo che un gradiente radiale somiglia fisicamente. Se ti trovi in dubbio, è lineare: i gradienti radiali attirano l'attenzione sul proprio centro, e se al centro non c'è niente che meriti attenzione, il gradiente sta ponendo una domanda a cui il design non risponde.
I gradienti danneggiano le prestazioni?
Non in modo significativo. Un gradiente CSS viene dipinto una volta e costa meno dell'immagine che avresti caricato altrimenti: sono byte che non hai scaricato. Dove costa è nell'animazione: animare gli stop di un gradiente forza un ridisegno a ogni fotogramma, il che è costoso. Se ti serve un gradiente in movimento, anima invece la transform di un elemento gradiente sovradimensionato, e lascia fare il lavoro al compositor.