# Gradienti retrò: dai tramonti anni ’70 agli schermi anni ’90

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

Strisce senape e ruggine, neon sul nero, verde acqua e viola e il blu delle barre del titolo. Tre decenni di gradienti retrò con i codici, e i piccoli cambiamenti che li rendono nuovi.

## The short version

- Un gradiente retrò è una sfumatura di colore che richiama un decennio preciso, il più delle volte le strisce calde degli anni Settanta, il neon degli Ottanta o il verde acqua e viola dei Novanta.
- I gradienti anni Settanta usano senape, arancione bruciato, ruggine e marrone cioccolato, spesso come strisce a bordi netti su fondo crema.
- I gradienti anni Ottanta si dividono in due stili: rosa neon e ciano sul nero, e pop pastello brillante in rosa, verde acqua, giallo e lilla.
- I gradienti anni Novanta comprendono sfumature dal verde acqua al viola, toni gioiello profondi e il gradiente dal blu navy al blu delle vecchie barre del titolo.
- Per modernizzare un gradiente retrò, ammorbidisci i bordi delle strisce, abbassa un po’ la saturazione, sfuma in OKLCH e aggiungi una grana fine.

Un **gradiente retrò** è una sfumatura di colore che richiama all’istante un decennio. Gli anni Settanta avevano strisce calde di senape, arancione, ruggine e marrone. Gli Ottanta avevano rosa neon e ciano sul nero, e un pop pastello brillante. I Novanta avevano verde acqua e viola, toni gioiello profondi e le barre dal blu navy al blu dei primi software per desktop. Qui sotto trovi una palette e una serie di gradienti da copiare per ogni decennio, poi un metodo per modernizzarli così che sembrino una citazione, non un travestimento.

Il retrò funziona perché il colore porta con sé la memoria. Le persone riconoscono un decennio dalla sua palette molto prima di notare il font o il layout, e questo fa di questi gradienti una scorciatoia verso un’atmosfera. Per la storia più ampia di come i gradienti hanno attraversato il design, leggi la [storia dei gradienti](https://gradiently.design/it/guide/history-of-gradients).

## Gradienti anni Settanta: strisce di tramonto in arancione e marrone

La palette degli anni Settanta è calda e terrosa: oro del raccolto, arancione bruciato, ruggine e un marrone cioccolato profondo, con il verde avocado come eccezione e il crema come fondo. Il suo segno distintivo è la striscia: quattro o cinque bande di colore impilate come un tramonto, con bordi netti invece di una sfumatura morbida.

- Crema: #f2e2c4
- Oro del raccolto: #e0a526
- Arancione bruciato: #d9661f
- Ruggine: #a8431f
- Cioccolato: #4a2c1d
- Avocado: #7d7b35

Una palette anni Settanta. Tutto tende al caldo, perfino il verde.

Strisce di tramonto anni Settanta: `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`

I punti di colore netti creano strisce: ogni colore inizia esattamente dove finisce il precedente. È il gradiente retrò più riconoscibile in assoluto.

Le sfumature morbide con gli stessi colori sembrano più delicate e si adattano meglio delle strisce a foto o testi lunghi. Tienile nella famiglia calda e non diventeranno mai sporche, perché ogni passaggio è un vicino stretto del precedente. Per cieli caldi più morbidi, leggi [gradienti tramonto](https://gradiently.design/it/guide/sunset-gradient).

- Tramonto del raccolto: `linear-gradient(180deg, #e0a526 0%, #d9661f 50%, #a8431f 100%)`
- Cucina avocado: `linear-gradient(135deg, #7d7b35 0%, #b9a44c 50%, #e9d8a6 100%)`
- Velluto marrone: `radial-gradient(circle at 50% 30%, #c77d3a 0%, #6b3a1f 55%, #2e1a10 100%)`
- Cream soda: `linear-gradient(180deg, #f2e2c4 0%, #f0c27a 55%, #e0a526 100%)`

Sfumature morbide anni Settanta: dall’oro alla ruggine, dall’avocado al crema, un bagliore marrone vellutato e un crema pallido che va verso l’oro.

## Gradienti anni Ottanta: notti al neon e pop pastello

Gli anni Ottanta ci hanno dato due stili molto diversi. Uno è la notte al neon: magenta e ciano che brillano sul nero, scritte cromate e griglie, presi dai film e dai videogiochi arcade dell’epoca. L’altro è un pop pastello brillante e giocoso: rosa, verde acqua, giallo canarino e lilla, spesso con scarabocchi neri e forme geometriche. La nostra guida ai [colori vaporwave](https://gradiently.design/it/guide/vaporwave-colors) approfondisce la notte al neon, con tanto di tramonto e griglia in CSS.

- Gomma da masticare: #ff4f9a
- Verde acqua piscina: #00c2c7
- Canarino: #ffe14d
- Lilla: #b18cff
- Nero scarabocchio: #111111

Pop pastello anni Ottanta. Il nero fa parte della palette: contorna le forme e impedisce ai colori brillanti di fluttuare.

- Notte al neon: `linear-gradient(180deg, #0b0221 0%, #2d0b59 60%, #ff2a6d 100%)`
- Cromato: `linear-gradient(180deg, #ffffff 0%, #9fb3c8 46%, #2b3a55 50%, #d6c0ff 100%)`
- Aerobica: `linear-gradient(90deg, #ff4f9a 0%, #b18cff 50%, #00c2c7 100%)`
- Strisce pop: `repeating-linear-gradient(45deg, #ffe14d 0 14px, #ff4f9a 14px 28px)`

Gradienti anni Ottanta. Cromato usa un punto netto tra il 46 e il 50% per simulare un orizzonte riflesso; Strisce pop è un gradiente ripetuto, quindi si affianca all’infinito.

## Gradienti anni Novanta: verde acqua, viola e il blu delle barre del titolo

Il colore degli anni Novanta è più freddo e più digitale. Il verde acqua era ovunque, spesso abbinato a viola e magenta su divise sportive, packaging e prime pagine web. I software per desktop portarono il gradiente dal blu navy al blu brillante delle barre del titolo delle finestre, uno dei primi gradienti che molte persone abbiano visto su uno schermo. Più avanti nel decennio arrivarono le plastiche traslucide verde acqua e, nella stampa, toni gioiello più profondi come il verde caccia, il bordeaux e il prugna.

- Blu barra del titolo: `linear-gradient(90deg, #000080 0%, #1084d0 100%)`
- Dal verde acqua al magenta: `linear-gradient(135deg, #0f7c80 0%, #5b2a86 60%, #c2185b 100%)`
- Verde acqua traslucido: `linear-gradient(160deg, #b8f1f0 0%, #3cc6c4 50%, #1a7f8e 100%)`
- Prugna e bordeaux: `linear-gradient(160deg, #3d1f4f 0%, #800020 100%)`
- Verde caccia: `linear-gradient(160deg, #2f4f3a 0%, #6b7d4f 100%)`

Gradienti anni Novanta, dallo schermo (blu barra del titolo) allo scaffale (verde acqua traslucido) alla pagina (toni gioiello).

Il passaggio al nuovo millennio è una storia a sé: argento, iridescente e pieno di bolle. Quello stile ha la sua guida, l’[estetica Y2K](https://gradiently.design/it/guide/y2k-aesthetic), e si abbina con naturalezza ai [gradienti olografici](https://gradiently.design/it/guide/holographic-gradients).

## I gradienti retrò per decennio in sintesi

| Decennio | Colori chiave | Stile del gradiente | Ideale per |
| --- | --- | --- | --- |
| Anni ’70 | Oro, arancione, ruggine, marrone, avocado | Strisce nette, sfumature calde e morbide | Food, bevande, negozi vintage, musica |
| Anni ’80 neon | Magenta, ciano, viola sul nero | Orizzonti luminosi, cromature | Vita notturna, gaming, musica synth |
| Anni ’80 pop | Rosa, verde acqua, canarino, lilla, nero | Sfumature brillanti, strisce, forme | Bambini, fitness, lanci giocosi |
| Anni ’90 | Verde acqua, viola, navy, toni gioiello | Sfumature diagonali, blu barra del titolo | Nostalgia tech, streetwear, fanzine |

Scegli il decennio in base all’atmosfera che vuoi, non solo in base all’epoca in cui è cresciuto il tuo pubblico.

## Come modernizzare un gradiente retrò

Un gradiente retrò copiato alla lettera può sembrare un costume di carnevale. Il retrò moderno tiene la palette che le persone riconoscono e cambia la finitura: bordi più morbidi, colori un po’ più calmi e una texture che ricorda la stampa più di uno schermo piatto.

1. **Tieni la palette, ammorbidisci i bordi** Dai a ogni striscia una breve sfumatura del 3-4% invece di un punto netto. Si legge ancora come strisce, ma sembra stampata e non disegnata.
2. **Togli un po’ di saturazione** I campioni originali si vedevano spesso in stampa o su schermi poco luminosi. Attenuarli un po’ sugli schermi luminosi di oggi li avvicina a come apparivano allora.
3. **Sfuma in OKLCH** Interpolare in OKLCH mantiene luminoso il centro di ogni sfumatura invece che grigiastro. I [gradienti CSS in OKLCH](https://gradiently.design/it/guide/css-gradient-oklch) spiegano come.
4. **Aggiungi una grana fine** La grana aggiunge la texture della pellicola e della carta e nasconde il banding. I [gradienti granulosi](https://gradiently.design/it/guide/grainy-gradients) hanno la ricetta.
5. **Usa una tipografia moderna** Lascia che sia il colore a portare il decennio e scegli un font pulito e attuale. Colore d’epoca più tipografia d’epoca è il punto in cui si scivola nel pastiche.

```css
/* Original: hard seventies stripes */
.retro {
  background: linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%);
}

/* Modernised: softer colours, short blends, OKLCH, fine grain */
.retro-modern {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg in oklch, #f4e6cc 0 18%, #dba84a 22% 34%, #d27a45 38% 50%, #a95a3c 54% 66%, #5a3a2a 70%);
}
```

Le stesse strisce due volte. La versione moderna usa colori un po’ più calmi, sfumature del 4% tra le bande, l’interpolazione OKLCH e uno strato di rumore SVG sopra.

### Datato

- Strisce nette e sature prese pari pari da un campionario
- Font, layout e colori d’epoca tutti insieme
- Colore piatto con banding visibile
- Tutti i cliché retrò in un solo design

### Retrò moderno

- Brevi sfumature tra le bande, colori un po’ più calmi
- Colore retrò con una tipografia pulita e attuale
- Grana fine per un effetto stampato
- Un decennio, un motivo, tanto spazio

Un poster A4 che annuncia i saldi estivi di denim vintage, scamosciato e velluto

Un poster A4: il calore degli anni Settanta con una tipografia moderna e generosa.

Una copertina quadrata di una playlist intitolata Canzoni dal mangianastri

La copertina di una playlist: una sola frase forte lascia al colore il viaggio nel tempo.

Se vuoi uno stile retrò da tenere, descrivilo nella [Forge](/forge) di Gradiently, per esempio «strisce di tramonto anni Settanta su fondo crema, con grana», e lei costruisce un Mark a partire dalla frase. Per i materiali stampati, leggi [stampare i gradienti](https://gradiently.design/it/guide/print-gradients) prima di inviare i file, perché arancioni e marroni caldi possono spostarsi sulla carta.

## FAQ

### Quali colori fanno sembrare retrò un gradiente?

I colori legati fortemente a un decennio: senape, arancione, ruggine e marrone per gli anni Settanta, magenta e ciano neon o pastelli brillanti per gli Ottanta, e verde acqua, viola e navy per i Novanta.

### Come creo le strisce anni Settanta in CSS?

Usa punti di colore netti, in cui ogni colore inizia esattamente dove finisce il precedente, per esempio `linear-gradient(180deg, #f2e2c4 0 20%, #e0a526 20% 36%, #d9661f 36% 52%, #a8431f 52% 68%, #4a2c1d 68%)`.

### Come evito che un gradiente retrò sembri datato?

Tieni la palette ma ammorbidisci i bordi delle strisce, abbassa un po’ la saturazione, sfuma in OKLCH, aggiungi una grana fine e abbinalo a una tipografia pulita e moderna.

### Che differenza c’è tra gradienti retrò e vintage?

Le due parole si usano quasi come sinonimi. Retrò di solito indica un design nuovo che richiama un decennio passato, mentre vintage suggerisce qualcosa che sembra davvero invecchiato, spesso con più texture e colori sbiaditi.

### Quale decennio si adatta al mio brand?

Scegli in base all’atmosfera: anni Settanta per calore e artigianalità, neon anni Ottanta per vita notturna ed energia, pop anni Ottanta per il gioco, e anni Novanta per la nostalgia digitale e lo streetwear.