# Dégradé ciel de nuit : bleus profonds, étoiles et clair de lune

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

Un ciel nocturne crédible n’est jamais un marine uni. Il a un zénith sombre, un horizon lumineux et une lumière qui vient de quelque part. Voici les couleurs, les codes et les petits détails qui le rendent vrai.

## The short version

- 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é.

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](https://gradiently.design/fr/guide/navy-gradient).

- Zénith: #020611
- Marine profond: #0b1a3a
- Bleu nuit: #1e3a6e
- Bleu d’horizon: #3b5b8f
- Lueur de la ville: #8a5a4a
- Clair de lune: #f4f1e3

Une palette nocturne pratique : quatre bleus de haut en bas, un ton d’horizon chaud et un blanc lunaire légèrement crème plutôt que blanc pur.

## 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.

- Minuit clair: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Heure bleue: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Lueur de la ville: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Nuit polaire: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Nuit du désert: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Lever de lune: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Six ciels. L’heure bleue a un horizon lilas, la lueur de la ville un orange sodium, la nuit polaire une pointe de bleu canard, et le lever de lune est éclairé depuis un seul point lumineux.

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é](https://gradiently.design/fr/guide/gradient-stops).

## 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.

Lune sur marine profond: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

Le disque crème s’arrête à 2,5 pour cent, l’anneau bleu pâle à 4 pour cent, et le halo s’étend jusqu’à 14 pour cent avant que le ciel ne prenne le relais.

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](https://gradiently.design/fr/guide/radial-gradient) 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é.

```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%;
}
```

Quatre couches d’étoiles à des tailles de tuile différentes, une lune au halo transparent et le ciel de minuit clair en dessous.

> **Moins d’étoiles, plus de réalisme** Un champ d’étoiles dense ressemble à du bruit sur un écran de téléphone. Gardez peu d’étoiles près de l’horizon, où la lumière les efface, et laissez quelques étoiles plus grandes porter la scène.

## 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é](https://gradiently.design/fr/guide/text-on-gradient) couvre les règles de contraste.

Un post événement portrait pour une soirée d’observation des étoiles, texte clair placé haut sur un ciel nocturne bleu profond

Un post Instagram en 1080×1350, avec les mots placés haut dans la partie sombre du ciel.

Une story verticale avec un titre court et calme sur un dégradé bleu nuit pour un produit de sommeil

Une story en 1080×1920 pour une marque de sommeil. Le cadre plus haut laisse plus de ciel au-dessus des mots.

| Usage | Format | Où placer la lumière |
| --- | --- | --- |
| Fond d’écran de téléphone | Format story 1080×1920 | Lueur d’horizon en bas, sous le dock |
| En-tête de site web | 1920×1080 | Lune en haut à droite, titre à gauche |
| Post événement | 1080×1350 | Lueur en bas, mots en haut |
| Couverture de playlist | 1080×1080 | Lune petite et décentrée |
| Slides | 1920×1080 | Garder le ciel sombre derrière le titre |

Où placer les parties lumineuses d’un ciel de nuit dans les formats courants.

## Comment éviter le banding d’un dégradé bleu foncé

Le bleu foncé est là où [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) 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](https://gradiently.design/fr/guide/dark-gradient-backgrounds) proposent d’autres recettes, et [les dégradés galaxie](https://gradiently.design/fr/guide/galaxy-gradient) 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é.

## FAQ

### 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.