Che cos’è un gradiente? Una guida semplice alle sfumature di colore

Che cos’è un gradiente? Nel design, un gradiente è un passaggio morbido e graduale da un colore a un altro su una superficie, come un blu profondo che si scioglie nel viola su un poster. Dove un riempimento piatto dipinge ogni pixel dello stesso colore, un gradiente dà a ogni punto il suo colore, calcolato a partire da pochi colori che scegli e da dove li metti. Questo piccolo cambiamento è il motivo per cui un gradiente può sembrare luce, aria o profondità, e anche il motivo per cui è facile farlo sembrare dozzinale.

Questa pagina spiega le parti di cui è fatto ogni gradiente, i tipi principali, dove si usano i gradienti e perché sono tornati. Ogni sezione rimanda a una guida più approfondita quando vuoi i dettagli.

Le parti di un gradiente

Ogni gradiente, che sia disegnato in uno strumento di design, scritto in CSS o generato da un motore di gioco, si riduce agli stessi pochi ingredienti. Quando sai nominarli, puoi descrivere qualsiasi gradiente con abbastanza precisione perché qualcun altro lo ricostruisca.

Le posizioni dei punti contano quanto i colori. Sposta il punto centrale dal 50% al 65% e gli stessi tre colori raccontano una storia diversa: più ombra, un’alba più tardiva. Se vuoi capire la direzione nel dettaglio, leggi in che direzione deve andare un gradiente.

Gradienti morbidi e a gradini

Un gradiente morbido fonde i colori in modo continuo tra i punti. Un gradiente a gradini, o con stop netti, mette due punti nella stessa posizione, così il colore salta invece di sfumare. Gli stop netti creano strisce, bandiere, barre di avanzamento e tramonti retrò; restano gradienti, solo con la fusione disattivata in quei punti.

I gradienti morbidi hanno un punto debole: gli schermi mostrano un numero limitato di sfumature, quindi una sfumatura molto delicata può spezzarsi in strisce visibili. Il problema ha una sua guida, il banding nei gradienti.

I tipi principali di gradiente

Il tipo è la forma lungo cui viaggia il colore. Quattro tipi coprono quasi tutto ciò che incontrerai, e i tipi di gradienti li mostra uno per uno con codice dal vivo.

• Lineare: il colore cambia lungo una linea retta con un certo angolo. Il cavallo da tiro per sfondi, pulsanti e banner. Vedi i gradienti lineari in CSS.
• Radiale: il colore si espande verso l’esterno da un punto in un cerchio o in un’ellisse, come un riflettore o un bagliore. Vedi i gradienti radiali.
• Conico: il colore ruota intorno a un punto centrale, come la lancetta di un orologio. Adatto a ruote dei colori, grafici a torta e riflessi. Vedi i gradienti conici.
• Mesh: diversi punti di colore si fondono insieme in due dimensioni, così il risultato sembra organico e pittorico. Vedi i gradienti mesh.

Come si fondono i colori: la parte che tutti saltano

Tra due punti, il software deve inventare ogni colore intermedio. Come lo fa dipende dallo spazio colore. La maggior parte degli strumenti e il CSS più vecchio fondono in sRGB, che mescola i valori di rosso, verde e blu in linea retta. È veloce, ma può passare per grigi spenti, soprattutto tra colori opposti come blu e giallo.

Gli spazi colore più recenti come OKLab e OKLCH sono costruiti intorno a come le persone percepiscono luminosità e tinta, quindi le sfumature restano più luminose e uniformi. In CSS puoi richiederli direttamente, e la differenza si vede facilmente. La storia completa, e le soluzioni, sono in i gradienti fangosi.

.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}

Dove si usano i gradienti

I gradienti si guadagnano il posto ovunque una superficie debba sembrare illuminata o viva senza aggiungere una foto. Gli usi più comuni sono sfondi per post social e siti web, icone delle app, pulsanti ed evidenziazioni nelle interfacce, packaging, poster e identità di brand che usano una sfumatura come altri brand usano un solo colore. Per il lato identità, vedi il branding con i gradienti.

Perché i gradienti sono tornati

I gradienti erano ovunque nelle interfacce lucide degli anni 2000, poi sono passati di moda quando il flat design ha conquistato gli schermi all’inizio degli anni 2010. Sono tornati in una forma più discreta: meno smussature e finti riflessi, più sfumature morbide di due o tre colori. Gli schermi ad alta risoluzione hanno aiutato, perché il colore morbido rende meglio su schermi densi, e i brand in cerca di qualcosa di più distintivo di una sola tinta piatta hanno trovato spazio nelle sfumature. La prospettiva lunga è in la storia dei gradienti.

Oggi i gradienti più interessanti vanno oltre il colore. Grana, texture e movimento lento fanno sembrare una sfumatura una materia più che un preset, ed è il tema di i gradienti con grana e la texture dei gradienti.

Se preferisci partire da una sfumatura finita invece di costruirne una da zero, il Mercato ha migliaia di Mark: ricette di gradiente complete di colore, materia, grana e luce con cui puoi creare design gratuitamente.