# Gradienti del cielo notturno: blu profondi, stelle, luna

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

Un cielo notturno credibile non è mai un blu notte piatto. Ha uno zenit scuro, un orizzonte luminoso e una luce che viene da qualche parte. Ecco i colori, i codici e i piccoli dettagli che lo rendono vero.

## The short version

- Un gradiente del cielo notturno è più scuro in alto nel riquadro e più chiaro vicino all’orizzonte, perché il cielo sopra la testa è il più lontano da ogni luce residua.
- I veri cieli notturni sono raramente neri puri: stanno tra il blu notte profondo, l’indaco e il grigio bluastro, con una banda più calda o più verde all’orizzonte.
- Le stelle si possono disegnare in CSS con minuscoli gradienti radiali sovrapposti al cielo, ciascuno ripetuto con una diversa dimensione di tessera, così lo schema non sembra mai una griglia.
- Una luna si legge meglio come un piccolo gradiente radiale luminoso con una caduta ampia e tenue nel blu circostante.
- I gradienti blu scuro formano facilmente bande, quindi aggiungi una leggera grana ed esporta in PNG o in video di alta qualità invece che in JPEG molto compresso.

Un **gradiente del cielo notturno** è una sfumatura verticale che parte quasi nera in alto e sale in un blu più morbido vicino all’orizzonte, spesso con una tenue banda calda o verde acqua proprio in fondo. Quella direzione conta: la parte alta è la più scura di qualsiasi cielo notturno, e l’orizzonte conserva ancora un po’ di luce diffusa da città, dal sole che tramonta o dalla luna. Rispetta quell’ordine e anche due soli colori si leggono come notte. Aggiungi una luna, qualche stella e un po’ di grana, e diventa un luogo.

## I colori di un vero cielo notturno

Guarda le fotografie del cielo dopo il tramonto e troverai pochissimo nero vero. Lo zenit è un blu notte profondo con un accenno di viola. La parte centrale del cielo è indaco o ardesia. L’orizzonte raccoglie la luce che c’è: arancione dai lampioni, lilla nell’ora blu, un debole verde sotto l’aurora alle alte latitudini. Scegliere questi come punti separati è ciò che distingue un cielo notturno da un generico [gradiente blu notte](https://gradiently.design/it/guide/navy-gradient).

- Zenit: #020611
- Blu notte profondo: #0b1a3a
- Blu notte: #1e3a6e
- Blu dell’orizzonte: #3b5b8f
- Bagliore della città: #8a5a4a
- Luce lunare: #f4f1e3

Una palette notturna funzionante: quattro blu dall’alto in basso, un tono caldo per l’orizzonte e un bianco lunare leggermente crema anziché bianco puro.

## Codici di gradienti del cielo notturno

Ognuno va dall’alto in basso a 180 gradi, quindi il colore più scuro sta in cima al riquadro. Copiane uno così com’è, oppure cambia il punto dell’orizzonte per cambiare l’ora e l’ambientazione.

- Mezzanotte limpida: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Ora blu: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Bagliore urbano: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Notte polare: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Buio nel deserto: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Sorgere della luna: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Sei cieli. L’ora blu ha un orizzonte lilla, il bagliore urbano un arancione al sodio, la notte polare un accenno di verde acqua, e il sorgere della luna è illuminato da un punto luminoso.

Nota che i punti non sono distribuiti in modo uniforme. Gran parte del riquadro resta scura e il cambio di colore avviene nell’ultimo quinto, che è come si comporta un vero orizzonte. Una distribuzione uniforme fa sembrare il cielo una rampa invece di una cupola. Per il ragionamento sui punti irregolari, vedi [i punti colore del gradiente](https://gradiently.design/it/guide/gradient-stops).

## Come aggiungere una luna

Una luna è un gradiente radiale in tre parti: un piccolo disco quasi bianco, una rapida discesa in un azzurro pallido e un alone lungo e tenue che sfuma nel cielo. Tieni piccolo il disco, intorno al 3-5 per cento della larghezza del riquadro. Una luna grande e morbida sembra un faro. Mettila fuori centro, in alto in un angolo, così non compete mai con il titolo.

Luna su blu notte profondo: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

Il disco crema si ferma al 2,5 per cento, l’anello azzurro pallido al 4 per cento e l’alone si estende fino al 14 per cento prima che subentri il cielo.

Per combinare una luna con un bagliore dell’orizzonte, sovrapponi il gradiente radiale a uno lineare. La guida al [gradiente radiale](https://gradiently.design/it/guide/radial-gradient) spiega posizioni e dimensioni più a fondo.

## Come disegnare le stelle in CSS

Le stelle sono minuscoli gradienti radiali: un punto netto di bianco che si ferma una frazione di pixel dopo. Dai a ogni strato di stelle il suo `background-size`, così si ripete con un ritmo diverso. Tessere da 200, 230, 290 e 170 pixel si ripetono sfasate, quindi l’occhio non trova mai la griglia. Varia anche l’opacità: le stelle vere non hanno tutte la stessa luminosità.

```css
.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}
```

Quattro strati di stelle con diverse dimensioni di tessera, una luna con un alone trasparente e il cielo di mezzanotte limpida sotto.

> **Meno stelle sembrano più vere** Un campo stellato fitto sembra rumore sullo schermo di un telefono. Tieni le stelle rade vicino all’orizzonte, dove la luce le attenua, e lascia che poche più grandi reggano la scena.

## Idee di design con il gradiente del cielo notturno

I cieli notturni vanno bene per eventi serali, lanci, brand per il sonno e il benessere, club di astronomia, uscite musicali e tutto ciò che accade dopo il tramonto. La metà superiore scura è una casa naturale per il testo chiaro, e l’orizzonte più luminoso dà all’occhio un pavimento. Metti il titolo nella parte alta centrale e tieni la luna lontana. Se le parole attraversano la banda dell’orizzonte, controlla che si leggano ancora: [il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) tratta le regole del contrasto.

Un post verticale per una serata di osservazione delle stelle, con testo chiaro in alto su un cielo notturno blu profondo

Un post Instagram a 1080×1350, con le parole in alto nella parte scura del cielo.

Una storia verticale con un titolo breve e calmo su un gradiente blu di mezzanotte per un prodotto per dormire

Una storia a 1080×1920 per un brand del sonno. Il riquadro più alto lascia più cielo sopra le parole.

| Uso | Formato | Dove va la luce |
| --- | --- | --- |
| Sfondo per telefono | Riquadro storia 1080×1920 | Bagliore dell’orizzonte in basso, sotto il dock |
| Hero di un sito | 1920×1080 | Luna in alto a destra, titolo a sinistra |
| Post per un evento | 1080×1350 | Bagliore in basso, parole in alto |
| Copertina di playlist | 1080×1080 | Luna piccola e fuori centro |
| Slide | 1920×1080 | Tieni scuro il cielo dietro il titolo |

Dove mettere le parti luminose di un cielo notturno nei formati più comuni.

## Come evitare le bande in un gradiente blu scuro

Il blu scuro è il punto in cui [le bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) si vedono di più, perché gli schermi hanno pochi gradini distinti tra i quasi neri. Distribuisci i punti più scuri su una distanza maggiore, aggiungi uno strato di rumore fine a opacità molto bassa ed evita una forte compressione JPEG. Per palette scure più profonde in generale, [gli sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) ha altre ricette, e [i gradienti galassia](https://gradiently.design/it/guide/galaxy-gradient) spingono lo stesso cielo verso viola e magenta.

Se preferisci non costruire a mano grana, luce e leggibilità, i Mark di Gradiently sono sfondi vivi che si rendono a ogni formato in cui progetti e si calmano dietro le tue parole. Cerca nel Mercato parole di colore come «mezzanotte» o «blu notte profondo» e progetta gratis con qualsiasi Mark non riservato.

## FAQ

### Quali colori compongono un gradiente del cielo notturno?

Parti da un blu notte quasi nero come `#020611` in alto, passa per `#0b1a3a` e `#1e3a6e` e finisci con un blu più chiaro come `#3b5b8f` all’orizzonte. Aggiungi un punto caldo o lilla in fondo per la luce di una città o l’ora blu.

### In che direzione dovrebbe andare un gradiente del cielo notturno?

Dall’alto in basso a 180 gradi, più scuro in cima. Di notte il cielo sopra la testa è sempre più scuro dell’orizzonte.

### Come aggiungo le stelle a un gradiente CSS?

Sovrapponi al cielo diversi minuscoli punti `radial-gradient()` e dai a ogni strato un `background-size` diverso, così le ripetizioni cadono sfasate e non sembrano mai una griglia.

### Perché il mio gradiente blu scuro mostra delle strisce?

Sono le bande: troppi pochi gradini di colore su una grande area scura. Aggiungi un po’ di grana, allontana di più i punti scuri ed esporta in PNG anziché in un JPEG compresso.

### Un gradiente del cielo notturno sta bene dietro il testo?

Sì, il testo chiaro si legge bene sul cielo scuro in alto. Tieni il titolo lontano dalla luna e dalla banda luminosa dell’orizzonte.