# Dégradés sombres et intenses : des codes riches en atmosphère

[Canonical HTML page](https://gradiently.design/fr/guide/moody-gradients)

Le sombre, c’est facile. L’atmosphère, c’est plus dur : elle vient de l’endroit où tombe la lumière, de la couleur que l’on retient et de la matière des ombres. Douze codes, et le raisonnement qui les sous-tend.

## The short version

- Un dégradé sombre et intense est un fondu sombre où la majeure partie de l’image reste dans l’ombre et où la couleur n’apparaît que là où tombe la lumière.
- Ces dégradés utilisent des couleurs sourdes et légèrement grisées plutôt que saturées, et c’est pourquoi ils paraissent cinématographiques plutôt que criards.
- Des ombres avec une pointe de couleur, comme un noir bleuté ou un noir prune, paraissent plus riches qu’un noir pur.
- Une lumière chaude sur un fond froid est le moyen le plus rapide de donner de l’atmosphère à un dégradé sombre.
- Les dégradés sombres forment plus de bandes que les clairs : ajoutez un peu de grain et exportez en PNG ou en vidéo de haute qualité.

Un **dégradé sombre** et intense est un fondu qui se comporte comme une pièce faiblement éclairée : la majeure partie de l’image reste dans l’ombre, une zone attrape la lumière, et les couleurs sont retenues plutôt que poussées. La recette tient en une phrase. Partez d’un quasi-noir teinté, ajoutez un ou deux tons moyens sourds, et laissez une seule lumière, souvent chaude sur un fond froid, animer la surface. Voici douze codes à copier, puis comment créer les vôtres et garder des mots lisibles par-dessus.

## Ce qui rend un dégradé intense, et pas seulement sombre

Beaucoup de dégradés sombres paraissent plats. Un marine qui s’estompe vers le noir est sombre, mais il n’a aucune météo. L’atmosphère naît de quelques décisions que photographes et étalonneurs prennent d’instinct, et que vous pouvez prendre volontairement.

- **Une tonalité basse.** Environ les trois quarts de l’image sont dans l’ombre. La lumière est l’exception, pas la règle.
- **Une seule source.** La lumière entre par un coin ou un bord, pour que l’œil sache où se trouvent la fenêtre ou la lampe.
- **Une couleur retenue.** Les tons moyens sont légèrement grisés. Un bleu canard poudré est plus intense qu’un bleu canard vif.
- **Des ombres colorées.** Le point le plus sombre est un noir bleuté, un noir verdâtre ou un sang-de-bœuf, jamais `#000000`.
- **Un contraste de température.** Une petite lumière chaude dans une scène froide, ou l’inverse, crée une tension.

### Sombre mais plat

- Du noir pur à une extrémité
- Un accent vif et saturé
- Une lumière répartie uniformément
- Une diagonale droite, d’un coin à l’autre
- Une surface numérique parfaitement lisse

### Intense

- Une ombre teintée qui garde une teinte
- Un accent sourd, légèrement grisé
- Une lumière concentrée en un seul endroit
- Un fondu radial ou doucement incliné
- Un grain fin, comme de la pellicule

## Douze codes de dégradés sombres et intenses

Chacun est une seule valeur CSS à coller dans `background`. Ils sont regroupés à peu près par température : d’abord les froids et orageux, puis les chauds, éclairés à la lampe, puis quelques-uns entre les deux.

- Orage: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Pétrole de minuit: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Grands fonds: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Forêt au crépuscule: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Sang-de-bœuf: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Dernière braise: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- Aux chandelles: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Réverbère: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Prune meurtrie: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Encre et violet: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Mousse et bronze: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Graphite rosé: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Douze dégradés sombres et intenses. Remarquez qu’aucun ne se termine en noir pur et qu’aucun n’utilise une couleur pleinement saturée.

Si vous voulez quelque chose de plus proche d’une nuit claire que d’une nuit d’orage, [les dégradés de ciel nocturne](https://gradiently.design/fr/guide/night-sky-gradient) tirent davantage vers le bleu et ajoutent des étoiles. Pour des couleurs plus profondes, plus brillantes et plus saturées, [les couleurs pierres précieuses](https://gradiently.design/fr/guide/jewel-tone-colors) se situent un cran plus lumineux que tout ce qui figure ici.

## Une palette sombre et intense comme point de départ

Pour créer les vôtres, partez d’une palette plutôt que de deux couleurs. Cinq suffisent : un fond, deux paliers d’ombre, un ton moyen sourd et une lumière. La lumière est la seule couleur autorisée à vraiment briller, et elle doit occuper une petite zone.

- Fond de nuit: #0d1117
- Ardoise profonde: #1b2330
- Orage: #2c3a4a
- Gris pluie: #5b6b78
- Ambre de lampe: #c98a3a

Une palette froide et pluvieuse avec une seule lumière chaude. Remplacez l’ambre par un rose poudré ou un jaune sodium pâle, et l’histoire change complètement.

La raison pour laquelle une lumière chaude fonctionne si bien face à une ombre froide est expliquée dans [la température de couleur](https://gradiently.design/fr/guide/color-temperature). Pour d’autres ensembles prêts à l’emploi, voyez [les palettes de couleurs sombres](https://gradiently.design/fr/guide/dark-color-palettes).

## Comment faire un dégradé sombre et intense en CSS

1. **Posez un fond teinté** Choisissez un quasi-noir qui contient une teinte, comme `#0b0d12` pour un noir bleuté ou `#120806` pour un noir brun chaud. Utilisez-le aussi comme `background-color` de repli.
2. **Ajoutez le corps de l’ombre** Posez un léger dégradé linéaire entre deux paliers sombres de la même teinte. Cela donne de la profondeur à l’image avant même l’arrivée de la lumière.
3. **Placez une seule lumière** Ajoutez dans un coin un dégradé radial qui s’estompe vers `transparent` vers 40 pour cent. Gardez sa couleur sourde et son opacité bien en dessous du maximum.
4. **Ajoutez une contre-lumière froide** En option, un second radial plus grand et plus faible dans le coin opposé, dans la famille froide. Il empêche le côté ombre de paraître mort.
5. **Terminez par du grain** Une fine couche de bruit à faible opacité masque le banding et donne à la surface un air de pellicule. [Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) donnent le code.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

Une lueur de réverbère en haut à droite, une brume bleu canard froide en bas à gauche et un corps ardoise. Trois couches, aucune image.

> **Les fondus sombres forment des bandes** Avec si peu d’écart entre les valeurs les plus sombres et les plus claires, les dégradés sombres montrent des bandes en paliers sur beaucoup d’écrans et après compression. Le grain, les exports PNG et l’absence de compression JPEG trop forte aident. [Le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) explique la solution en détail.

## Placer des mots sur un fond sombre et intense

Un texte clair sur un fond sombre se lit bien, jusqu’à ce qu’il croise la seule flaque lumineuse que vous avez si bien travaillée. Prévoyez le titre du côté de l’ombre, et gardez la lumière à l’écart des mots plutôt que derrière eux. Un blanc cassé doux, comme `#ece6dc`, se pose plus confortablement sur un fond sombre que le blanc pur, qui peut paraître dur.

Une story verticale sombre pour un événement où la zone claire du fond se trouve derrière le titre La séance de minuit

Le fond traverse directement les mots : la zone la plus claire peut tomber derrière le titre.

La même story sombre avec une ombre calme derrière le titre et la lueur cantonnée à un bord

Ici, le Mark place sa zone la plus calme et la plus sombre derrière le texte, et la lumière reste au bord.

Cette version de droite, c’est ce que fait un Mark Gradiently de lui-même : il sait où sont les mots, assombrit la couleur près des lettres et choisit un texte clair ou foncé ligne par ligne dans sa propre palette, sans encadrés ni ombres ajoutés. [Le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) couvre la version manuelle.

## Où les dégradés sombres et intenses fonctionnent le mieux

| Usage | À essayer | Format |
| --- | --- | --- |
| Story de soirée ou de club | Encre et violet, Réverbère | 1080×1920 |
| Couverture de podcast | Sang-de-bœuf, Graphite rosé | 3000×3000 |
| Affiche de menu de restaurant ou de bar | Aux chandelles, Mousse et bronze | A4, 2480×3508 |
| En-tête de site pour un studio ou une agence | Orage, Pétrole de minuit | 1920×1080 |
| Miniature YouTube pour un thriller ou un essai | Dernière braise, Grands fonds | 1280×720 |
| Couverture de playlist Spotify | Forêt au crépuscule, Prune meurtrie | 1080×1080 |

Les dégradés sombres et intenses conviennent à tout ce qui se passe la nuit, à tout ce qui veut paraître réfléchi, et à tout ce qui s’écoute plutôt que se crie.

Ils conviennent à la nuit, à la musique, aux boissons, au cinéma, au parfum et au luxe discret. Ils conviennent beaucoup moins à un anniversaire d’enfant ou à des soldes d’été. Pour toute une interface dans ce registre, [les fonds en dégradé sombre](https://gradiently.design/fr/guide/dark-gradient-backgrounds) détaillent le soin supplémentaire qu’exigent les écrans.

Si vous préférez ne pas régler des couches à la main, le Marché propose des Marks vivants exactement dans ce registre, à chercher avec des mots comme « bleu canard profond » ou « sang-de-bœuf ». Vous pouvez créer gratuitement avec n’importe quel Mark non réservé, et en réserver un signifie qu’aucune autre affiche ne portera la même atmosphère.

## FAQ

### Quelles couleurs pour un dégradé sombre et intense ?

Des quasi-noirs teintés comme le noir bleuté ou le noir prune, un ou deux tons moyens sourds comme le bleu canard poudré ou l’ardoise, et une seule lumière plus chaude comme l’ambre ou la braise.

### Quelle différence entre un dégradé intense et un simple dégradé sombre ?

Un dégradé sombre doit seulement être sombre. Un dégradé intense a une source de lumière claire, une couleur retenue et des ombres colorées, qui lui donnent de l’atmosphère.

### Faut-il utiliser du noir pur dans un dégradé sombre ?

En général non. Un quasi-noir avec une pointe de teinte, comme `#0b0d12`, paraît plus riche et se fond plus doucement dans les couleurs qui l’entourent.

### Pourquoi mon dégradé sombre a-t-il des rayures ?

C’est du banding, très visible dans les fondus sombres et subtils. Ajoutez un grain fin et exportez en PNG ou en vidéo de haute qualité plutôt qu’en JPEG compressé.

### Quelle couleur de texte sur un dégradé sombre et intense ?

Un blanc cassé doux se lit généralement le mieux. Placez-le du côté de l’ombre, loin de la zone la plus claire, et vérifiez le contraste là où se trouve chaque ligne.