# Dégradés subtils : des nuances discrètes pour des interfaces épurées

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

Les meilleurs dégradés d’interface sont ceux que personne ne remarque avant qu’ils disparaissent. Voici des codes à coller dès aujourd’hui, les endroits où ils se rendent utiles, et le piège technique qui attrape tout le monde.

## The short version

- Un dégradé subtil ne change la luminosité que de quelques pour cent, ou déplace la teinte d’un petit pas, pour qu’une surface paraisse éclairée plutôt que plate.
- Les dégradés subtils fonctionnent le mieux sur les fonds de page, les cartes, les sections d’en-tête et les surfaces en mode sombre, où ils ajoutent de la profondeur sans concurrencer le contenu.
- Mélanger en oklch garde la variation de luminosité d’un dégradé subtil régulière d’un bout à l’autre.
- Les dégradés subtils font plus de bandes que les dégradés marqués, car il y a moins de niveaux de couleur entre deux tons proches, et un peu de bruit est la solution habituelle.
- Sur une interface sombre, un bord supérieur légèrement plus clair se lit comme une lumière qui tombe sur la surface.

Un **dégradé subtil** passe entre deux couleurs si proches qu’on sent le changement plus qu’on ne le voit : du blanc à un blanc cassé froid, d’un quasi-noir à un quasi-noir un peu plus doux. Ce petit décalage donne à une surface l’air éclairée, et c’est pourquoi les interfaces épurées l’utilisent sur les fonds de page, les cartes et les panneaux en mode sombre. Les codes ci-dessous limitent l’écart de luminosité à quelques pour cent ; au-delà, le dégradé devient un élément à part entière plutôt qu’une surface.

## Codes de dégradés subtils clairs

Chacun part d’un quasi-blanc et glisse vers une légère teinte. Choisissez la teinte à partir de votre couleur de marque pour que même le fond garde une trace d’identité. Les fondus de haut en bas paraissent les plus naturels, car la lumière vient en général d’en haut.

- Papier: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Brume bleue: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Lin chaud: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Voile lilas: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Lavis menthe: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Lumière en coin: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Six dégradés subtils clairs. Sur un écran lumineux, ils évoquent un papier doucement éclairé ; sur un téléphone en plein jour, presque du blanc.

## Codes de dégradés subtils sombres

Les surfaces sombres en profitent encore plus, car un noir pur et plat ressemble à un trou dans l’écran. Éclaircissez un peu le haut et laissez le bas se poser. [Les dégradés en mode sombre](https://gradiently.design/fr/guide/dark-mode-gradients) traitent des thèmes complets ; voici les briques de base.

- Graphite: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Minuit: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Encre violette: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Forêt de nuit: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Halo du haut: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Six dégradés subtils sombres. Le halo du haut convient à un en-tête ou à une fenêtre modale : une légère flaque de lumière venue d’en haut.

## Où les dégradés subtils fonctionnent dans une interface

| Surface | Intensité | Exemple |
| --- | --- | --- |
| Fond de page | À peine visible sur toute la hauteur | `#ffffff` à `#f6f7f9` |
| Carte | Un rien plus clair sur le bord supérieur | `#ffffff` à `#fafafa` |
| Section d’en-tête | Une légère teinte qui s’accumule derrière le titre | Lumière en coin ou halo du haut |
| Bouton | Haut plus clair, bas un peu plus profond | `#4f46e5` à `#4338ca` |
| Panneau en mode sombre | Haut éclairci, bas posé | `#18181b` à `#0f0f12` |
| Barre latérale ou pied de page | Un cran plus sombre que la page, toujours en dégradé | `#f8fafc` à `#eef2f7` |

Les dégradés subtils par surface. Gardez une seule direction dans toute l’interface pour que la lumière semble venir d’un seul endroit.

La règle de base : un dégradé subtil ne doit jamais être ce qu’on regarde. Si quelqu’un commente le dégradé en relecture, il est trop fort pour un fond. Pour des styles sobres en impression et sur les réseaux sociaux autant qu’à l’écran, voyez [les fonds minimalistes](https://gradiently.design/fr/guide/minimalist-backgrounds).

Un post vertical avec une courte ligne de texte sur un fond calme aux nuances douces

Un fond calme et une courte phrase. Quand la couleur reste discrète, c’est la typographie qui travaille.

## Teinter un dégradé subtil avec votre couleur de marque

Un dégradé gris neutre est sûr mais anonyme. Teinter l’extrémité claire ou sombre d’une trace de la teinte de votre marque relie toute l’interface au logo sans que personne puisse dire pourquoi. L’astuce consiste à garder la teinte et à jeter presque toute la saturation.

1. **Prenez la teinte de la marque** Convertissez votre couleur de marque principale en oklch ou en HSL et notez seulement sa teinte : autour de 265 pour un violet, 160 pour un vert, 30 pour un orange chaud.
2. **Restez presque gris** Réglez une chroma très basse, autour de 0,005 à 0,015 en oklch, ou une saturation sous environ 30 % en HSL à très haute luminosité. Vous voulez un murmure de couleur, pas un pastel.
3. **Fixez deux valeurs de luminosité** Pour les thèmes clairs, essayez 99 % et 96 % ; pour les thèmes sombres, autour de 20 % et 15 %. Gardez les deux extrémités sur la même teinte pour que le fondu ne glisse jamais vers le gris ou une deuxième couleur.
4. **Comparez avec un blanc ou un noir pur** Placez le dégradé à côté d’un bloc blanc ou noir uni. Si vous ne voyez aucune différence, poussez un peu l’extrémité basse ; si la teinte se voit depuis l’autre bout de la pièce, baissez la chroma.

La même teinte peut ensuite passer dans les bordures, les séparateurs et les états de survol, pour que le dégradé fasse partie d’un système discret plutôt que d’être un effet isolé. Les boutons sont le seul endroit où autoriser un écart un peu plus fort, quelques pour cent plus sombre en bas, car un soupçon de volume les rend plus cliquables à l’œil.

## Écrire un dégradé subtil en CSS

Les codes hexadécimaux fonctionnent partout. Pour un contrôle plus fin, écrivez les couleurs en oklch, où le premier nombre est la luminosité perçue, afin de régler l’écart exactement : de 99 % à 96 %, par exemple. Mélanger en oklch garde aussi le changement régulier sur toute la longueur. [Le dégradé CSS en oklch](https://gradiently.design/fr/guide/css-gradient-oklch) explique la syntaxe, et [le dégradé linéaire CSS](https://gradiently.design/fr/guide/css-linear-gradient) couvre les bases.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

Une valeur de repli en hexadécimal, puis une version oklch avec un écart de luminosité précis pour les navigateurs qui gèrent l’interpolation des couleurs dans les dégradés.

> **Fixe ou défilant** `background-attachment: fixed` lie le dégradé à la fenêtre, pour qu’une longue page ne l’étire pas en un écart invisible. Testez sur mobile, où certains navigateurs traitent les fonds fixes différemment.

## Pourquoi les dégradés subtils font des bandes, et la solution

Deux couleurs proches n’ont que très peu de niveaux entre elles dans une image 8 bits. Étirez-les sur un en-tête de 1920 pixels et chaque niveau devient une bande visible, surtout sur les dégradés sombres et les écrans bon marché. L’explication complète se trouve dans [les bandes de dégradé](https://gradiently.design/fr/guide/gradient-banding).

### Fait des bandes

- Deux couleurs sombres très proches sur tout l’écran
- Un dégradé enregistré en JPEG compressé
- Un fondu propre sans rien pour casser les niveaux

### Reste lisse

- Un écart un peu plus grand, ou un troisième arrêt
- Un rendu en CSS, ou un export en PNG
- Une légère couche de bruit sur le dégradé

Sur le web, une minuscule texture de bruit SVG posée sur le dégradé à faible opacité supprime les niveaux visibles sans que personne remarque le grain ; [la texture de bruit en CSS](https://gradiently.design/fr/guide/css-noise-texture) donne le code. Pour les posts et les présentations, un Mark Gradiently porte son propre grain et se rend à toutes les tailles, si bien qu’un fond discret reste lisse, en story comme en bannière. Quand vous voulez l’inverse du calme, [les dégradés vifs](https://gradiently.design/fr/guide/vibrant-gradients) proposent des codes saturés.

## FAQ

### Qu’est-ce qu’un dégradé subtil ?

Un dégradé entre deux couleurs très proches, qui ne diffèrent en général que de quelques pour cent de luminosité, pour que la surface paraisse doucement éclairée plutôt que visiblement colorée.

### Quel dégradé subtil choisir pour un fond blanc ?

Essayez `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, qui glisse du blanc vers un gris froid très léger.

### Pourquoi mon dégradé subtil fait-il des rayures ?

Des couleurs proches ont peu de niveaux entre elles, d’où les bandes. Ajoutez un troisième arrêt, élargissez un peu l’écart ou posez une légère texture de bruit par-dessus.

### Un dégradé subtil doit-il aller de haut en bas ?

En général, oui. La lumière vient plutôt d’en haut, donc un haut légèrement plus clair paraît naturel sur les surfaces claires comme sombres.