In breve
- 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.
In questa pagina
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.
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.
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.
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.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)Per combinare una luna con un bagliore dell’orizzonte, sovrapponi il gradiente radiale a uno lineare. La guida al gradiente radiale 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à.
.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%;
}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 tratta le regole del contrasto.
Un post Instagram a 1080×1350, con le parole in alto nella parte scura del cielo.
Una storia a 1080×1920 per un brand del sonno. Il riquadro più alto lascia più cielo sopra le parole.
Formato
Dove va la luce
Formato
Dove va la luce
Formato
Dove va la luce
Formato
Dove va la luce
Dove va la luce
Come evitare le bande in un gradiente blu scuro
Il blu scuro è il punto in cui le bande nei gradienti 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 ha altre ricette, e i gradienti galassia 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.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo