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

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.

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.

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

La raison pour laquelle une lumière chaude fonctionne si bien face à une ombre froide est expliquée dans la température de couleur. Pour d’autres ensembles prêts à l’emploi, voyez les palettes de couleurs sombres.

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

1. 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. 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. 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. 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. 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 donnent le code.

.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%);
}

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.

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é couvre la version manuelle.

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

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