# Sfumature di cielo: codici per alba, mezzogiorno, tramonto e notte

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

Il cielo è l’unica sfumatura che tutti studiano da anni senza volerlo. Ecco i codici per ogni ora, nell’ordine in cui li usa il cielo vero, e come mettere le parole su ciascuno.

## The short version

- Una sfumatura di cielo convincente è più profonda in alto e più pallida all’orizzonte, perché la luce vicino all’orizzonte attraversa più aria.
- All’alba e al tramonto i colori caldi stanno in basso, vicino all’orizzonte, e i blu freddi restano sopra la testa.
- Stendi una sfumatura di cielo in verticale con `180deg` in CSS, così la parte alta del design si legge come la parte alta del cielo.
- I cieli notturni sembrano più naturali con una fascia leggermente più chiara all’orizzonte che con un nero piatto.
- L’inchiostro scuro si legge bene sui cieli di mezzogiorno e poco su un cielo d’alba, mentre l’inchiostro chiaro va bene in alto sul cielo d’alba, al crepuscolo, all’ora blu e di notte.

Una **sfumatura di cielo** va da un colore più profondo in alto a uno più pallido all’orizzonte, perché è così che si comporta la luce del giorno: la luce vicino all’orizzonte attraversa più aria, si diffonde di più e va verso il bianco. Azzecca quest’unica direzione e quasi ogni blu si legge come cielo. Qui sotto trovi codici da copiare per sei momenti del giorno, dalla prima luce a una notte senza luna, con note su dove funziona ciascuno e quale colore di testo ci sta sopra.

## Come è organizzato il cielo vero

Guarda in su in una giornata serena: il blu sopra di te è più ricco del blu vicino ai tetti. All’alba e al tramonto la luce del sole attraversa così tanta atmosfera che la maggior parte del blu si disperde prima di arrivare a te, lasciando rossi, arancioni e rosa in basso mentre lo zenit resta freddo. Ne vengono due regole per qualsiasi sfumatura di cielo: profondo in alto, pallido in basso, e i colori caldi solo vicino all’orizzonte.

- Indaco d’alba: #2b3a67
- Rosa della prima luce: #e3a6b4
- Zenit di mezzogiorno: #1f6fd1
- Orizzonte di mezzogiorno: #a9d3f5
- Ora d’oro: #f59e42
- Magenta del crepuscolo: #b5507a
- Ora blu: #23407a
- Mezzanotte: #03050f

Un giorno di cielo in otto colori. Ogni momento della giornata ne prende due o tre, sempre con il più scuro in alto.

## Codici di sfumatura per alba e sorgere del sole

L’alba è il cielo più morbido della giornata. In alto c’è ancora l’indaco della notte, al centro vira al lilla e sull’orizzonte sta una fascia di rosa e pesca. Dà un senso di quiete e speranza, ed è per questo che si adatta a brand del benessere, routine mattutine, annunci di qualcosa di nuovo e tutto ciò che vuole sembrare gentile e non rumoroso.

- Alba: dall’indaco alla pesca: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Prima luce pallida: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Sole nascente: lilla e albicocca: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Tre albe. I punti caldi non salgono mai sopra il terzo inferiore, ed è questo che le fa leggere come alba e non come tramonto.

## Sfumature del cielo sereno di mezzogiorno e del giorno

Un cielo sereno a mezzogiorno è la classica **sfumatura azzurro cielo**: blu saturo in alto che sfuma in un blu pallido, quasi bianco, all’orizzonte. Tieni stabile la tonalità e lascia che sia la luminosità a lavorare. Se il punto in basso vira al grigio invece che al blu pallido, il cielo comincia a sembrare inquinato. Un pomeriggio velato è la stessa idea con meno saturazione, e una giornata coperta scambia il blu con un grigio freddo.

- Mezzogiorno sereno: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Pomeriggio velato: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Coperto: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Cieli diurni. Il mezzogiorno sereno è quello che la gente intende per azzurro cielo; il coperto serve quando vuoi calma senza colore.

Per altri blu oltre il cielo, dal blu notte al ghiaccio, vedi i codici della [sfumatura blu](https://gradiently.design/it/guide/blue-gradient). Se vuoi anche l’acqua sotto il cielo, l’articolo sulla [sfumatura oceano](https://gradiently.design/it/guide/ocean-gradient) funziona al contrario: pallida in alto, profonda in basso.

## Codici per ora d’oro, crepuscolo e ora blu

Il cielo della sera è dove le sfumature di cielo diventano drammatiche. L’ora d’oro tiene un blu diurno in alto e un ambra intenso all’orizzonte, e la morbida fascia grigiastra tra i due è reale, quindi non combatterla. Il crepuscolo porta il blu al blu notte e aggiunge magenta e corallo. L’ora blu, il breve momento dopo che il sole è tramontato, è quasi tutta blu ed è uno degli sfondi scuri più lusinghieri che esistano.

- Ora d’oro: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Crepuscolo: dal blu notte al corallo: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Ora blu: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Cieli serali. Il crepuscolo è il più affollato di tutti i codici qui, quindi dagli meno parole e più spazio.

Se il tuo design punta tutto su arancioni e rosa senza alcun blu, sei passato dal cielo al tramonto, e i codici della [sfumatura tramonto](https://gradiently.design/it/guide/sunset-gradient) ti serviranno di più.

## Codici per sfumature del cielo notturno

Un cielo notturno è raramente nero puro. Città, luna e il debole bagliore dell’atmosfera tengono l’orizzonte un po’ più chiaro dello zenit. Costruisci una sfumatura notturna con una cima quasi nera e un orizzonte blu notte profondo e si legge come cielo; invertila e si legge come un buco. Per stelle, chiaro di luna e molti altri blu scuri, leggi la guida sulla [sfumatura del cielo notturno](https://gradiently.design/it/guide/night-sky-gradient).

Notte senza luna: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Quasi nero in alto, blu notte profondo all’orizzonte. Aggiungi una grana fine sopra, perché una sfumatura così scura fa banding facilmente sugli schermi.

> **I cieli scuri fanno banding** I codici per ora blu e notte passano per pochissimi valori di colore distinti, quindi schermi ed esportazioni compresse mostrano gradini visibili. Uno strato leggero di rumore lo risolve, come spiegato in [banding nelle sfumature](https://gradiently.design/it/guide/gradient-banding).

## Quale cielo per quale design

| Cielo | Sensazione | Adatto a | Colore del testo |
| --- | --- | --- | --- |
| Alba | Gentile, fiduciosa | Benessere, lanci, eventi mattutini | Bianco in alto, indaco scuro vicino all’orizzonte |
| Mezzogiorno sereno | Aperto, ottimista | Viaggi, app, offerte estive | Blu notte scuro |
| Coperto | Calmo, serio | Report, annunci sobri | Carbone |
| Ora d’oro | Caldo, nostalgico | Ospitalità, fotografia, matrimoni | Marrone scuro o bianco in alto |
| Crepuscolo | Drammatico, sociale | Eventi, musica, vita notturna | Bianco |
| Ora blu e notte | Premium, concentrato | Tech, cinema, aperture serali | Bianco o azzurro pallido |

Un punto di partenza. Prova le tue parole sul tuo sfondo, perché una sola sfumatura può richiedere testo scuro a un’estremità e chiaro all’altra.

Quest’ultimo punto conta più sui cieli che sulla maggior parte delle sfumature, perché un cielo passa dallo scuro al chiaro per natura. Metti le parole dove il cielo è più calmo e scegli l’inchiostro per quell’area, non per la sfumatura nel suo insieme. [Testo su una sfumatura](https://gradiently.design/it/guide/text-on-gradient) approfondisce. In Gradiently è tutto gestito per te: un Mark tiene la sua regione più calma dietro le parole, e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga dalla palette del Mark stesso.

Una storia verticale con uno sfondo color alba e il titolo In piedi prima del sole nella metà superiore

Una storia per una lezione mattutina. Il titolo sta in testo chiaro nel cielo alto e calmo, e i dettagli più in basso dove la luce è più morbida.

## Sfumature di cielo per ogni formato

I formati alti si adattano perfettamente ai cieli: una storia o un pin possono mostrare l’intera salita dall’orizzonte allo zenit. I formati larghi la schiacciano, quindi tieni i colori dell’orizzonte nel terzo inferiore e lascia che il cielo alto riempia il resto. È una disposizione diversa per ogni dimensione, ed è per questo che ritagliare un’unica immagine su più formati di solito fa perdere l’orizzonte.

- Storia 1080×1920: 1080 × 1920
- Pin per Pinterest 1000×1500: 1000 × 1500
- Hero del sito 1920×1080: 1920 × 1080
- Intestazione X 1500×500: 1500 × 500

Nella storia il cielo ha spazio per respirare. Nell’intestazione la fascia calda dell’orizzonte deve essere più sottile, o inghiotte l’inquadratura.

## Una sfumatura di cielo in CSS per ogni ora del giorno

In un sito bastano tre proprietà personalizzate per descrivere qualsiasi cielo. Cambia una classe e l’intera sezione cambia ora, comodo per un hero che segue l’orario locale del visitatore o per una pagina che si scurisce mentre procede una storia.

```css
.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }
```

Una sfumatura, quattro ore. Scegli la classe con una riga di JavaScript che legge l’orologio del visitatore, oppure impostala a mano per ogni pagina.

Per angoli, posizioni dei punti e alternative, vedi la [sfumatura lineare in CSS](https://gradiently.design/it/guide/css-linear-gradient).

## FAQ

### Quali colori formano una sfumatura di cielo?

Un cielo diurno va da un blu saturo come #1f6fd1 in alto a un blu pallido come #dceefb all’orizzonte. Alba e crepuscolo aggiungono rosa, pesca, magenta o corallo solo vicino al fondo.

### In che direzione deve andare una sfumatura di cielo?

Dall’alto verso il basso, con il colore più scuro in alto. In CSS è `linear-gradient(180deg, alto, basso)`.

### Come faccio a far sembrare un’alba diversa da un tramonto?

Nel design l’alba di solito si legge più morbida e fredda, con lilla e pesca e la fascia calda bassa e sottile. I tramonti tendono a essere disegnati più saturi, con arancione e magenta più forti che salgono più in alto.

### Quale colore di testo funziona su una sfumatura azzurro cielo?

Blu notte scuro o carbone si leggono bene sui cieli di mezzogiorno e vicino all’orizzonte dell’alba. Usa il bianco su crepuscolo, ora blu e notte e in alto su un cielo d’alba, e controlla il contrasto dove stanno davvero le parole.

### Perché la mia sfumatura del cielo notturno sembra a righe?

Le sfumature molto scure hanno pochi gradini di colore, quindi gli schermi mostrano bande. Aggiungi uno strato leggero di grana ed esporta in PNG invece che in JPEG molto compresso.