L’essentiel en bref
- Un dégradé ciel de nuit est plus sombre en haut de l’image et plus clair près de l’horizon, car le ciel au-dessus de nous est le plus éloigné de toute lumière résiduelle.
- Les vrais ciels nocturnes sont rarement noir pur : ils se situent entre le marine profond, l’indigo et le gris bleuté, avec une bande plus chaude ou plus verte à l’horizon.
- On peut dessiner des étoiles en CSS avec de minuscules dégradés radiaux superposés au ciel, chacun répété avec une taille de tuile différente pour que le motif ne ressemble jamais à une grille.
- Une lune se lit le mieux comme un petit dégradé radial lumineux, avec un fondu large et faible dans le bleu qui l’entoure.
- Les dégradés bleu foncé forment facilement des bandes : ajoutez un léger grain et exportez en PNG ou en vidéo de haute qualité plutôt qu’en JPEG très compressé.
Sur cette page
Un dégradé ciel de nuit est un fondu vertical qui part d’un quasi-noir en haut et s’éclaircit vers un bleu plus doux près de l’horizon, souvent avec une légère bande chaude ou bleu canard tout en bas. Cette direction compte : le zénith est toujours la partie la plus sombre d’un ciel de nuit, et l’horizon retient encore un peu de lumière diffuse venue des villes, du soleil couchant ou de la lune. Respectez cet ordre et même deux couleurs évoquent la nuit. Ajoutez une lune, quelques étoiles et du grain, et cela devient un lieu.
Les couleurs d’un vrai ciel de nuit
Regardez des photos du ciel après la tombée de la nuit et vous trouverez très peu de vrai noir. Le zénith est un marine profond avec une pointe de violet. Le milieu du ciel est indigo ou ardoise. L’horizon capte la lumière ambiante : orange des réverbères, lilas à l’heure bleue, vert pâle sous les aurores aux hautes latitudes. Choisir ces couleurs comme arrêts distincts, c’est ce qui distingue un ciel de nuit d’un banal dégradé marine.
Codes de dégradés ciel de nuit
Chacun va de haut en bas à 180 degrés, pour que la couleur la plus sombre se trouve en haut de l’image. Copiez-en un tel quel, ou changez l’arrêt de l’horizon pour modifier l’heure et le décor.
Remarquez que les arrêts ne sont pas espacés régulièrement. La majeure partie de l’image reste sombre, et le changement de couleur se fait dans le dernier cinquième, comme sur un vrai horizon. Un espacement régulier donne au ciel l’air d’une rampe plutôt que d’une voûte. Pour comprendre les arrêts irréguliers, voyez les arrêts de couleur d’un dégradé.
Comment ajouter une lune
Une lune est un dégradé radial en trois parties : un petit disque presque blanc, une chute rapide vers un bleu pâle, et un long halo faible qui se fond dans le ciel. Gardez le disque petit, autour de 3 à 5 pour cent de la largeur de l’image. Une grande lune floue ressemble à un projecteur. Placez-la hors du centre, haut dans un coin, pour qu’elle ne fasse jamais concurrence à votre titre.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)Pour combiner une lune et une lueur d’horizon, superposez le dégradé radial à un dégradé linéaire. Le guide du dégradé radial détaille les positions et les tailles.
Comment dessiner des étoiles en CSS
Les étoiles sont de minuscules dégradés radiaux : un point blanc net qui s’arrête une fraction de pixel plus loin. Donnez à chaque couche d’étoiles son propre background-size pour qu’elle se répète à un rythme différent. Des tuiles de 200, 230, 290 et 170 pixels se répètent en décalé, et l’œil ne trouve jamais la grille. Variez aussi l’opacité : les vraies étoiles n’ont pas toutes la même 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%;
}Idées de design avec un dégradé ciel de nuit
Les ciels de nuit conviennent aux soirées, aux lancements, aux marques de sommeil et de bien-être, aux clubs d’astronomie, aux sorties musicales et à tout ce qui se passe après la tombée du jour. La moitié supérieure sombre accueille naturellement un texte clair, et l’horizon plus lumineux donne un sol au regard. Placez votre titre dans le haut du milieu et gardez la lune à l’écart. Si les mots traversent la bande d’horizon, vérifiez qu’ils restent lisibles : le texte sur un dégradé couvre les règles de contraste.
Un post Instagram en 1080×1350, avec les mots placés haut dans la partie sombre du ciel.
Une story en 1080×1920 pour une marque de sommeil. Le cadre plus haut laisse plus de ciel au-dessus des mots.
Format
Où placer la lumière
Format
Où placer la lumière
Format
Où placer la lumière
Format
Où placer la lumière
Où placer la lumière
Comment éviter le banding d’un dégradé bleu foncé
Le bleu foncé est là où le banding des dégradés se voit le plus, car les écrans ont peu de paliers distincts entre les quasi-noirs. Étalez les arrêts les plus sombres sur une plus grande distance, ajoutez une fine couche de bruit à très faible opacité et évitez la compression JPEG forte. Pour des palettes sombres plus profondes en général, les fonds en dégradé sombre proposent d’autres recettes, et les dégradés galaxie poussent le même ciel vers le violet et le magenta.
Si vous préférez ne pas construire à la main le grain, la lumière et la lisibilité, les Marks de Gradiently sont des fonds vivants qui se rendent à chaque format dans lequel vous créez et s’apaisent derrière vos mots. Cherchez sur le Marché des mots de couleur comme « minuit » ou « marine profond » et créez gratuitement avec n’importe quel Mark non réservé.
Les questions qu’on nous pose
Quelles couleurs pour un dégradé ciel de nuit ?
Commencez par un marine quasi noir comme #020611 en haut, passez par #0b1a3a et #1e3a6e, et terminez par un bleu plus clair comme #3b5b8f à l’horizon. Ajoutez un arrêt chaud ou lilas tout en bas pour la lumière de la ville ou l’heure bleue.
Dans quelle direction doit aller un dégradé ciel de nuit ?
De haut en bas à 180 degrés, le plus sombre en haut. La nuit, le ciel au-dessus de nous est toujours plus sombre que l’horizon.
Comment ajouter des étoiles à un dégradé CSS ?
Superposez plusieurs minuscules points radial-gradient() au ciel et donnez à chaque couche un background-size différent, pour que les répétitions se décalent et ne ressemblent jamais à une grille.
Pourquoi mon dégradé bleu foncé a-t-il des rayures ?
C’est du banding : trop peu de paliers de couleur sur une grande zone sombre. Ajoutez un peu de grain, écartez davantage les arrêts sombres et exportez en PNG plutôt qu’en JPEG compressé.
Un dégradé ciel de nuit convient-il derrière du texte ?
Oui, un texte clair se lit bien sur le haut sombre du ciel. Gardez le titre à l’écart de la lune et de la bande lumineuse de l’horizon.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil