# Breve storia dei gradienti nel design

[Canonical HTML page](https://gradiently.design/it/guide/history-of-gradients)

Le sfumature di colore sono più antiche degli schermi, sono passate di moda quasi da un giorno all’altro e sono tornate più forti. Ecco come il gradiente è passato dai cieli dipinti agli sfondi vivi.

## The short version

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

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](https://gradiently.design/it/guide/what-is-a-gradient) e i [tipi di gradienti](https://gradiently.design/it/guide/types-of-gradients).

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

La storia del gradiente a colpo d’occhio.

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

Cielo dipinto, dallo zenit all’orizzonte: `linear-gradient(180deg, #4f74a3 0%, #8fadc9 50%, #e9dcc0 100%)`

Blu profondo in alto, che impallidisce in una foschia calda all’orizzonte: la sfumatura che i paesaggisti usavano per dare profondità allo spazio.

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](https://gradiently.design/it/guide/color-wheel).

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.

- Fontana divisa, dal rosso al blu: `linear-gradient(90deg, #d7263d 0%, #7a4f8f 50%, #1b98e0 100%)`
- Poster con tramonto ad aerografo: `linear-gradient(180deg, #1b1340 0%, #7b2d6e 45%, #f06a3f 75%, #ffd27a 100%)`

Due look pre-digitali. Una fontana divisa mescola inchiostri veri, quindi il suo centro è un viola più scuro; i cieli ad aerografo impilavano bande calde sotto una parte alta scura.

## 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](https://gradiently.design/it/guide/gradient-banding).

- Sfumatura a fasce, cinque colori: `linear-gradient(90deg, #14145c 0% 20%, #26268a 20% 40%, #3a3ab4 40% 60%, #5454d6 60% 80%, #7676f0 80% 100%)`
- La stessa sfumatura, liscia: `linear-gradient(90deg, #14145c 0%, #7676f0 100%)`

Cosa fa una palette limitata a una sfumatura. Con soli cinque colori a disposizione, un gradiente liscio diventa una scaletta.

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](https://www.w3.org/TR/css-images-3/), e nei primi anni 2010 ogni browser principale poteva disegnare un gradiente senza un’immagine.

```css
/* 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); }
```

Tre epoche della stessa intestazione. Oggi basta una riga, con una [sfumatura OKLCH più morbida](https://gradiently.design/it/guide/css-gradient-oklch) quando la vuoi.

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

- Pulsante gel in stile Aqua: `linear-gradient(180deg, #d9efff 0%, #8cc8f7 48%, #3d8ee6 52%, #74c1ff 100%)`
- Barra del titolo in stile Luna: `linear-gradient(180deg, #3a8cf4 0%, #0a5fd8 12%, #0453d0 80%, #0a3fa8 100%)`
- Verde lucido Web 2.0: `linear-gradient(180deg, #b6e67a 0%, #7cc242 50%, #5ea82a 51%, #8fd14f 100%)`
- Vetro in stile Aero: `linear-gradient(180deg, #e8f3fb 0%, #bcd8ee 50%, #9cc3e3 51%, #d2e8f7 100%)`

Il trucco distintivo dell’epoca: un brusco cambio di tono a metà altezza, che l’occhio legge come un riflesso su una superficie lucida.

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](https://gradiently.design/it/guide/y2k-aesthetic) 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.

- Verde brillante in stile iOS 7: `linear-gradient(180deg, #87fc70 0%, #0bd318 100%)`
- Dal giallo al viola passando per il rosa: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%)`
- Da viola a rosa, era dei preset: `linear-gradient(135deg, #7f5af0 0%, #ff6ac1 100%)`
- Da blu a ciano, era dei preset: `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`

Il look del ritorno: layout piatti, sfumature brillanti. Le coppie di due colori come le ultime due sono diventate così comuni da sembrare ormai dei preset.

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](https://gradiently.design/it/guide/why-every-feed-looks-the-same).

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

Un campo di luce morbido: `radial-gradient(ellipse at 30% 25%, #ffd6a5 0%, #f28482 30%, #6d3fa0 65%, #1a1033 100%)`

Luce invece di strisce o lucentezza: la pesca che si accende nel corallo, nel viola e nella notte. Vedi i [gradienti mesh](https://gradiently.design/it/guide/mesh-gradients) e i [gradienti shader](https://gradiently.design/it/guide/shader-gradients) per come si fanno i campi di oggi.

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](https://gradiently.design/it/guide/gradient-trends-2026).

Un Mark: un’identità di gradiente con un codice, un creatore e un proprietario.

## FAQ

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