In breve
- I pittori sfumavano il colore molto prima degli schermi, usando morbide transizioni di tono e lontananze azzurrine e nebbiose per suggerire profondità e luce.
- I primi schermi dei computer potevano mostrare troppo pochi colori per sfumature morbide, quindi i gradienti comparivano come fasce visibili o motivi di dithering.
- L’interfaccia Aqua di Apple, presentata nel 2000, ha fatto dei gradienti lucidi un look distintivo del decennio successivo.
- Il flat design ha messo da parte i gradienti nei primi anni 2010, in modo più visibile con Windows 8 nel 2012 e iOS 7 nel 2013.
- I gradienti sono tornati a metà degli anni 2010, con l’icona a gradiente di Instagram del 2016 come esempio più noto, e da allora sono cresciuti in look mesh, con grana e basati su shader.
In questa pagina
La storia dei gradienti nel design è la storia della tecnologia che raggiunge la pittura. Gli artisti sfumavano il colore da secoli; la stampa ha imparato a simularlo con punti e inchiostro diviso; i primi schermi riuscivano a malapena a mostrarlo; le interfacce lucide degli anni 2000 ne hanno abusato; il flat design lo ha rimosso; e a metà degli anni 2010 è tornato e non se n’è più andato davvero. I gradienti di ogni epoca hanno l’aspetto che hanno per gli strumenti del tempo.
È una storia breve e pratica, con il look di ogni epoca come gradiente da copiare. Per le basi, vedi cos’è un gradiente e i tipi di gradienti.
| Quando | Cosa è successo | Il look del gradiente |
|---|---|---|
| Rinascimento | Sfumato e prospettiva aerea nella pittura | Morbide sfumature tonali, lontananza azzurrina e nebbiosa |
| 1704 | L’Opticks di Newton dispone lo spettro in un cerchio | La prima ruota dei colori |
| Fine 1800 | Stampa a retino | Il tono fatto di punti |
| Primi anni 1990 | Schermi a 256 colori | Banding e dithering |
| Dal 2000 al 2007 | Aqua, Luna di Windows XP, Web 2.0, Aero di Vista | Lucido, gel e vetro |
| Dal 2012 al 2014 | Windows 8, iOS 7, Material Design | Colore piatto, sfumature lievi |
| 2016 | L’icona a gradiente di Instagram | Tornano le sfumature brillanti |
| Fine anni 2010 in poi | Mesh, conici, grana, shader | Campi di luce morbidi e movimento |
I gradienti prima degli schermi: pittura e stampa
I pittori sfumavano il colore molto prima che qualcuno lo chiamasse gradiente. Gli artisti del Rinascimento usavano lo sfumato, morbide transizioni di tono senza contorni netti, una tecnica associata in modo celebre a Leonardo da Vinci. I paesaggisti usavano la prospettiva aerea: le colline lontane svaniscono in una foschia pallida e azzurrina e il cielo si schiarisce verso l’orizzonte, che è il gradiente più antico che la maggior parte di noi conosca.
linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)La scienza ha dato un ordine alle sfumature di colore. Gli esperimenti di Isaac Newton con il prisma spargevano la luce bianca in uno spettro continuo, e la sua Opticks (1704) ne disponeva i colori in un cerchio, l’antenata di ogni ruota dei colori.
La stampa doveva simulare il tono continuo. I retini, sviluppati alla fine dell’Ottocento, trasformavano le sfumature in punti di dimensioni diverse. Gli stampatori usavano anche la fontana divisa: due o più inchiostri caricati affiancati su un’unica macchina, che si fondevano l’uno nell’altro sui rulli, una tecnica ancora amata nella serigrafia e nella stampa tipografica. L’aerografo dava agli illustratori sfumature morbide a mano e ha plasmato gran parte dei poster e delle copertine di album degli anni 1970 e 1980.
I primi schermi: banding, dithering e immagini ripetute
I primi schermi dei computer potevano mostrare solo un insieme limitato di colori alla volta, e le palette a 256 colori comuni nei primi anni 1990 non potevano contenere una sfumatura morbida. I gradienti si spezzavano in strisce visibili, chiamate banding, o venivano trattati con il dithering in motivi di punti che l’occhio mediava in una sfumatura. Le stesse strisce compaiono ancora quando un gradiente è lungo e sottile; vedi il banding nei gradienti.
Il primo web non aveva alcuna funzione per i gradienti. I designer creavano un’immagine a gradiente larga un pixel e dicevano al browser di ripeterla lungo la pagina. L’SVG, una Raccomandazione del W3C del 2001, comprendeva gradienti lineari e radiali, ma i gradienti CSS sono arrivati dopo: WebKit ha introdotto una sintassi con prefisso alla fine degli anni 2000, la versione standard è stata scritta in CSS Images Level 3, e nei primi anni 2010 ogni browser principale poteva disegnare un gradiente senza un’immagine.
/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }
/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }
/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }Gli anni 2000 lucidi: Aqua, Luna e Web 2.0
Apple ha presentato l’interfaccia Aqua per Mac OS X nel 2000: pulsanti traslucidi e lucidi che sembravano gocce di gel colorato, con un riflesso luminoso in alto. Windows XP è seguito nel 2001 con il tema Luna, barre del titolo blu sfumate e un pulsante Start verde. A metà del decennio, pulsanti lucidi, loghi riflettenti e ombre morbide erano così comuni sui siti che quel look è diventato sinonimo di Web 2.0.
L’Aero glass di Windows Vista nel 2007 ha spinto oltre la traslucenza. Il problema era la ripetizione: quando ogni pulsante, badge e logo portava lo stesso riflesso, la lucidità ha smesso di segnalare qualità e ha cominciato a segnalare un template. La guida all’estetica Y2K tratta il look più ampio di quegli anni.
La svolta del flat design: Metro e iOS 7
Il linguaggio di design Metro di Microsoft, prima su Windows Phone e poi in tutto Windows 8 nel 2012, usava riquadri di colore pieno, testo semplice e nessuna lucentezza. iOS 7 di Apple, nel 2013, ha abbandonato la pelle cucita, il feltro e le texture delle versioni precedenti per un design piatto e chiaro. Il Material Design di Google, introdotto nel 2014, teneva piatto il colore ma usava l’ombra per mostrare i livelli.
Anni 2000 lucidi
- Un riflesso netto a metà altezza
- Riflessi e smussature
- Gradienti su ogni controllo, come decorazione
- Imitazioni di materiali reali
Anni 2010 piatti
- Colore pieno o una lieve sfumatura a due toni
- Niente smussature, ombra minima
- Colore usato per organizzare, non per decorare
- Testo e spazio che fanno il lavoro
I gradienti non sono scomparsi; hanno cambiato carattere. Molte delle nuove icone delle app di iOS 7 usavano gradienti brillanti e lievi dall’alto in basso al posto della lucentezza, un’anticipazione di ciò che stava per arrivare.
Il gradiente ritorna: Instagram e la metà degli anni 2010
Nel 2016 Instagram ha sostituito la sua icona della fotocamera con un semplice contorno su un gradiente dal caldo al viola, uno dei gradienti di brand più visibili mai realizzati. Più o meno nello stesso periodo, app e brand hanno cominciato ad abbinare layout piatti a gradienti audaci e brillanti, spesso due colori sfumati in diagonale. Il flat design aveva ripulito la decorazione; i gradienti sono tornati come colore e atmosfera invece che come falsa lucentezza.
Quel successo ha avuto un costo. Generatori e strumenti di design distribuivano le stesse coppie, e alla fine del decennio molti feed si somigliavano, un problema trattato in perché tutti i feed sembrano uguali.
I gradienti oggi: mesh, grana, shader e movimento
L’ultimo capitolo riguarda ricchezza e controllo. I gradienti mesh, con più punti di colore che tirano in direzioni diverse, sono passati dagli strumenti vettoriali specialistici alle app di design di tutti i giorni. conic-gradient(), definito in CSS Images Level 4, è arrivato nei browser dal 2018. Gli shader WebGL permettono ai siti di renderizzare gradienti che si muovono e rispondono in tempo reale, la grana è tornata a far sembrare fisico il colore digitale e nel 2025 Apple ha introdotto Liquid Glass, un materiale traslucido su tutte le sue piattaforme.
radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)L’idea più recente è che un gradiente possa essere un’identità con un proprietario, non uno stile che chiunque può campionare. I Mark di Gradiently sono gradienti vivi: colori, materiali, luce, grana e movimento come un’unica ricetta, ciascuno con un codice pubblico e un solo proprietario alla volta. Per dove si va dopo, vedi le tendenze dei gradienti 2026.
GR·BBGB·1K
Lilac Pulse
Vedi questo MarkLe domande più frequenti
Quando sono stati introdotti i gradienti CSS?
WebKit ha introdotto una sintassi con prefisso per i gradienti alla fine degli anni 2000, e gli standard linear-gradient() e radial-gradient() sono stati definiti in CSS Images Level 3. Nei primi anni 2010 ogni browser principale li supportava senza un’immagine.
Perché i gradienti sono passati di moda?
Alla fine degli anni 2000 i gradienti lucidi erano su quasi ogni pulsante e logo, così hanno smesso di sembrare speciali. Il flat design, guidato da Windows 8 nel 2012 e da iOS 7 nel 2013, li ha sostituiti con colore pieno e testo semplice.
Quando sono tornati di moda i gradienti?
A metà degli anni 2010. L’icona a gradiente di Instagram del 2016 è l’esempio più noto, e le sfumature brillanti a due colori si sono diffuse poco dopo tra app, siti e brand.
Cos’era l’interfaccia Aqua di Apple?
Aqua era il look che Apple ha presentato per Mac OS X nel 2000, con pulsanti lucidi simili al gel e superfici traslucide. Ha fissato lo stile dei gradienti lucidi del decennio.
Cosa è venuto dopo il flat design?
Layout piatti con colore ricco: prima gradienti brillanti, poi gradienti mesh, grana, movimento guidato da shader e, più di recente, materiali traslucidi come il Liquid Glass di Apple.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
