# Gradienti tramonto: palette arancio, corallo e crepuscolo

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

La maggior parte dei gradienti tramonto sbaglia nello stesso punto: il centro, dove il blu incontra l’arancione e diventa grigio. Un cielo vero non lo fa mai. Ecco l’ordine che usa la natura, e dieci palette costruite su di esso.

## The short version

- Un gradiente tramonto fonde colori caldi come oro, arancione e corallo in rosa, viola e un blu sera profondo.
- In un tramonto vero, il cielo va dal giallo e arancione all’orizzonte, passando per rosso e rosa, fino al viola e al blu sopra la testa.
- Sfumare il blu direttamente nell’arancione salta i rosa e i viola intermedi e diventa grigio al centro.
- Sfumare l’arancione direttamente nel nero lo rende marrone, quindi i gradienti crepuscolari rendono meglio scurendosi attraverso il prugna o l’indaco.
- Metti il testo nella parte alta e più scura di un gradiente tramonto, dove il contrasto con il testo bianco è più alto.

Un **gradiente tramonto** fonde colori caldi, oro, arancione e corallo, in rosa, viola e un blu sera profondo. È uno dei gradienti più amati nel design, perché tutti lo riconoscono e quasi a tutti piace. Ed è anche uno dei più facili da sbagliare. Il segreto è seguire l’ordine che il cielo usa davvero: caldo e luminoso all’orizzonte, sempre più freddo attraverso il rosa e il viola man mano che si alza lo sguardo. Salta quei colori intermedi e il gradiente diventa grigio.

## L’ordine naturale dei colori del tramonto

Quando il sole è basso, la sua luce attraversa molta più atmosfera per arrivare fino a te. Lungo il percorso, l’aria disperde la luce blu fuori dal fascio diretto, quindi la luce vicino al sole arriva gialla, arancione e rossa. Più in alto nel cielo, lontano dal sole, resta più blu. Il risultato è una fascia di colori impilati dall’orizzonte verso l’alto.

L’ordine completo del tramonto: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Dal blu profondo sopra la testa, attraverso viola, rosa e arancione, fino all’oro all’orizzonte. Ogni passaggio è vicino al successivo, quindi nulla diventa grigio.

| Altezza nel cielo | Colore | Codice d’esempio |
| --- | --- | --- |
| Sopra la testa | Dal blu profondo all’indaco | `#1e3a8a` |
| Cielo alto | Dal viola al malva | `#6d28d9` |
| Cielo centrale | Dal rosa al magenta | `#db2777` |
| Cielo basso | Dall’arancione al corallo | `#f97316` |
| Orizzonte | Dall’oro al giallo pallido | `#fcd34d` |

Le fasce di un tramonto limpido. I cieli veri cambiano con nuvole, foschia e stagione, ma l’ordine resta.

## Palette di gradienti tramonto, con i codici

Queste dieci palette seguono tutte l’ordine del cielo, dall’alto in basso. Alcune usano l’intera gamma; altre prendono solo l’estremità calda o solo il crepuscolo.

- Crepuscolo corallo: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Sera nel deserto: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Ora blu: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Ultimo bagliore: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Tropicale, solo caldi: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Foschia pesca: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Mediterraneo: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Sole sull’orizzonte: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Brace: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Dieci gradienti tramonto. Quello radiale mette il sole stesso sul bordo inferiore dell’inquadratura.

Synthwave è il cugino stilizzato e al neon di quello vero; i [colori vaporwave](https://gradiently.design/it/guide/vaporwave-colors) e i [gradienti retrò](https://gradiently.design/it/guide/retro-gradients) portano più avanti quella direzione.

## Perché i gradienti tramonto si sporcano, e come rimediare

Ci sono due errori classici. Il primo è unire direttamente blu e arancione. Sono quasi opposti sulla ruota dei colori, e una sfumatura dritta tra i due fa una media grigia al centro. Il cielo non lo fa mai, perché passa attraverso il viola e il rosa. Il secondo è sfumare l’arancione nel nero per un’atmosfera più scura. L’arancione scuro è marrone, quindi il gradiente si legge come ruggine o fango invece che come sera.

- Dal blu all’arancione: centro grigio: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Attraverso viola e rosa: pulito: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Dal nero all’arancione: marrone: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Dall’indaco al prugna: crepuscolo: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Due tramonti sporchi e le loro correzioni. Entrambe aggiungono i colori che il cielo stesso attraversa.

Se vuoi meno punti, sfumare in OKLCH aiuta: mantiene i colori saturi al centro della sfumatura. Leggi [gradienti OKLCH in CSS](https://gradiently.design/it/guide/css-gradient-oklch) e, per la teoria, [gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients).

## Dove funzionano i gradienti tramonto

I tramonti portano con sé una sensazione chiara: la fine della giornata, il calore, un po’ di nostalgia. Questo li rende naturali per alcuni lavori e strani per altri. Un tramonto luminoso e completo si adatta a eventi estivi, viaggi, musica e ospitalità. Una versione crepuscolare, soprattutto viola, si adatta a lanci serali, podcast e a tutto ciò che invita alla riflessione. Una versione solo calda, dall’oro al corallo, si adatta a food, bevande e momenti di saldi.

- **Poster e inviti per eventi:** i colori dicono «sera» prima della data.
- **Viaggi e ospitalità:** l’ora dorata è la luce più fotografata che esista, e le persone la riconoscono.
- **Copertine musicali e playlist:** le palette crepuscolari sembrano cinematografiche e un po’ malinconiche.
- **Campagne stagionali:** un tramonto che si raffredda durante l’autunno segna la stagione senza nuove grafiche.

Dove si adattano meno: finanza seria, sanità e tutto ciò che deve sembrare neutro. Il calore si legge come tempo libero. I colori del tramonto stanno anche saldamente sul lato caldo della ruota; i [colori caldi e freddi](https://gradiently.design/it/guide/warm-and-cool-colors) spiegano come la temperatura cambia l’atmosfera di un design.

## Come costruire il tuo gradiente tramonto

1. **Scegli quanto cielo vuoi** Tutta la gamma per il dramma, solo l’estremità calda per l’energia, o solo il crepuscolo per la calma.
2. **Metti il caldo in basso** Oro e arancione stanno vicino all’orizzonte. I tramonti capovolti possono funzionare, ma si leggono come stilizzati.
3. **Non saltare mai un vicino** Tra blu e arancione, inserisci viola e rosa. Tra arancione e scuro, inserisci prugna o indaco.
4. **Dai meno spazio alla fascia calda** Nei cieli veri i colori più luminosi abbracciano l’orizzonte. Limitarli al quarto inferiore fa sembrare naturale il gradiente.
5. **Aggiungi grana** I cieli lunghi e morbidi fanno facilmente banding. Uno strato di rumore fine mantiene morbida la sfumatura dopo la compressione.

## Testo su un gradiente tramonto

La parte alta di un gradiente tramonto è scura e fredda, perfetta per il testo bianco. Quella bassa è luminosa e calda, perfetta per il testo scuro o per nessun testo. Il centro, dove il rosa incontra l’arancione, è il punto più difficile per entrambi. Metti i titoli in alto e i dettagli in basso, oppure tieni le parole in un’unica fascia calma.

Un poster verticale per un evento con un titolo vicino alla parte alta di un caldo gradiente serale

Il titolo in alto nel cielo più scuro, i dettagli più in basso.

Una storia verticale per i saldi con un titolo sopra un bagliore caldo in basso

Una storia in cui il bagliore caldo sta sotto le parole.

```css
.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}
```

La palette Sole sull’orizzonte come hero di una pagina, con il titolo posto nel cielo scuro sopra il bagliore.

Per altre palette di cieli e paesaggi, leggi [palette di colori dalla natura](https://gradiently.design/it/guide/nature-color-palettes), e per versioni guidate dal rosa, [gradienti rosa](https://gradiently.design/it/guide/pink-gradient).

## FAQ

### Quali colori ci sono in un gradiente tramonto?

Di solito oro e arancione all’orizzonte, poi corallo, rosa e magenta, poi viola e un blu profondo sopra la testa.

### Perché il mio gradiente tramonto sembra sporco?

Di solito perché sfuma il blu direttamente nell’arancione, o l’arancione direttamente nel nero. Aggiungi viola e rosa tra blu e arancione, e scurisci attraverso il prugna o l’indaco invece che con il nero.

### Qual è il codice CSS per un gradiente tramonto?

Per un tramonto completo prova linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Ogni palette di questa pagina si può copiare come CSS.

### Dove va il testo su un gradiente tramonto?

Nella parte alta, più scura e fredda, per il testo bianco, o nella fascia calda e chiara per il testo scuro. Evita il centro, dove il rosa incontra l’arancione.