# Comment réussir un dégradé : une vérification en sept points

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

La plupart des dégradés ratés échouent aux mêmes quelques tests. Soumettez n’importe quel mélange à ces sept vérifications, dans l’ordre, et vous saurez exactement quoi changer avant que quiconque ne le voie.

## The short version

- Un dégradé est réussi quand ses couleurs se rejoignent sans griser, que ses arrêts sont espacés inégalement et que sa lumière semble venir d’un seul endroit.
- Les milieux gris ou boueux apparaissent quand deux couleurs opposées se mélangent directement ; ajouter une couleur de transition ou mélanger en OKLCH les corrige.
- Un peu de grain, autour de 2 à 6 % d’opacité, masque l’effet de bandes et donne à un dégradé numérique l’allure d’une surface.
- Un bon dégradé laisse toujours une zone calme où les mots peuvent se placer avec un fort contraste.
- Exportez les dégradés en PNG ou en vidéo de haute qualité plutôt qu’en JPEG compressé, qui crée des bandes visibles.

Savoir comment réussir un dégradé se résume à sept vérifications, menées dans l’ordre : des couleurs qui se rejoignent sans griser, des arrêts placés inégalement, une lumière qui vient d’une seule direction, un fond qui pose l’ambiance, une touche de grain, un espace calme pour les mots, et un export qui garde le tout lisse. Chacune est un test rapide avec une correction claire. Presque tous les dégradés qui font bon marché échouent à au moins deux d’entre elles, et corriger ces deux-là fait généralement plus que changer entièrement les couleurs.

| Vérification | Le test | En cas d’échec |
| --- | --- | --- |
| 1. Milieu net | Le milieu est-il gris ou brun ? | Ajoutez une couleur de transition ou mélangez en OKLCH |
| 2. Arrêts inégaux | Chaque couleur a-t-elle la même largeur ? | Donnez l’essentiel de l’espace à une couleur |
| 3. Une seule lumière | Pouvez-vous dire où est la lumière ? | Éclaircissez un côté ou un coin |
| 4. Un fond | Est-il clairement sombre ou clairement clair ? | Poussez la base vers plus sombre ou plus pâle |
| 5. Grain | Voyez-vous des bandes ? | Ajoutez 2 à 6 % de bruit |
| 6. Place pour le texte | Le texte se lit-il partout ? | Apaisez la zone derrière lui |
| 7. Export | Survit-il à la mise en ligne ? | PNG pour les images fixes, débit élevé pour la vidéo |

Toute la vérification sur une page. Suivez-la de haut en bas ; les dernières corrections dépendent des premières.

## 1. Des couleurs qui se rejoignent proprement

Quand deux couleurs opposées sur le cercle chromatique se mélangent directement, le milieu tombe dans le gris. Bleu vers orange et vert vers rose sont les coupables habituels. Ajoutez une couleur de transition entre elles, pour que le mélange fasse le tour du cercle au lieu de traverser son centre, ou mélangez dans un espace colorimétrique perceptuel. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) et [l’interpolation des dégradés](https://gradiently.design/fr/guide/gradient-interpolation) expliquent les deux.

- Échoue : milieu gris: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Réussit : transition magenta: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Réussit : mélange en OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Les deux mêmes couleurs de trois façons. Une transition ou un mélange perceptuel garde le milieu vivant.

## 2. Des arrêts placés inégalement

Des couleurs espacées régulièrement se lisent comme une rampe sortie d’un préréglage. Dans la nature, une couleur domine généralement et le changement se fait sur une courte distance : un ciel est surtout bleu avec une étroite bande chaude à l’horizon. Donnez à votre couleur principale 60 à 70 % du cadre et laissez les autres arriver tard. [Les arrêts de couleur d’un dégradé](https://gradiently.design/fr/guide/gradient-stops) approfondit le placement et les points de transition.

- Tiers égaux: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Poids vers le haut: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Les trois mêmes couleurs. La version pondérée a une ambiance ; la version égale a une formule.

## 3. Une lumière venant d’une seule direction

Un bon dégradé semble éclairé. Choisissez d’où vient la lumière, en général d’un coin supérieur, et faites de cette zone la plus claire et la plus saturée. Tout le reste s’en éloigne. Si vous ne pouvez pas désigner la source de lumière, le dégradé paraîtra plat, quelles que soient les couleurs. Un [dégradé radial](https://gradiently.design/fr/guide/radial-gradient) doux superposé à un dégradé linéaire est le moyen le plus rapide d’en ajouter une.

## 4. Un fond qui pose l’ambiance

Décidez si la création est sombre ou claire, et tenez-vous-y. Un dégradé qui erre d’un violet moyen à un rose moyen n’a pas de fond, donc il paraît indécis. Une base presque noire fait briller les couleurs ; un blanc cassé chaud leur donne un air imprimé. Poussez la base plus loin que ce qui vous semble confortable, puis revenez d’un cran.

- Pas de fond: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Fond sombre, coin éclairé: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Fond clair, coin éclairé: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Les vérifications 3 et 4 ensemble. Un fond net et une seule lumière transforment un préréglage en scène.

## 5. Le grain : le bon dosage de bruit

Les dégradés numériques parfaitement lisses montrent des bandes sur beaucoup d’écrans, et ils ont l’air de réglages par défaut. Une fine couche de bruit corrige les deux. La plage utile est étroite : en dessous d’environ 2 % d’opacité vous ne le verrez pas, et au-delà d’environ 8 % il se lit comme une texture volontaire plutôt qu’une finition. Pour les dégradés sombres, commencez à 3 % ; pour les dégradés pâles, à 5 %, car le bruit se voit moins sur les couleurs claires.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
```

Une couche de bruit SVG en mosaïque à 4 %. Augmentez ou baissez l’opacité d’un cran à la fois en observant la zone la plus sombre.

D’autres recettes de grain se trouvent dans [les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) et [la texture de bruit en CSS](https://gradiently.design/fr/guide/css-noise-texture).

## 6. Un espace calme pour les mots

La plupart des dégradés existent pour porter un message. Repérez où vont les mots, et assurez-vous que cette zone est la plus calme et la plus homogène en ton, pour que chaque ligne ait le même contraste. La partie la plus lumineuse et la plus chargée du dégradé doit être ailleurs. Ne corrigez jamais un contraste insuffisant avec un halo derrière les lettres : déplacez plutôt la lumière.

Une publication de soldes où une partie du titre se trouve sur une zone claire du dégradé et perd en contraste

Échoue à la vérification 6 : la couleur traverse directement les mots.

La même publication de soldes avec une zone calme et homogène derrière le titre pour que tous les mots se lisent clairement

Réussit : la zone derrière le texte est plus calme et chaque ligne se lit.

C’est la vérification que Gradiently fait pour vous. Un Mark sait où sont vos mots : sa zone la plus calme se place derrière le texte, les couleurs proches des lettres s’assombrissent ou s’éclaircissent, et l’encre automatique choisit un texte clair ou foncé pour chaque ligne dans la palette du Mark lui-même.

## 7. Un export qui garde le dégradé lisse

- **Images fixes :** exportez en PNG. La compression JPEG transforme les longs fondus en paliers, et les applis sociales compressent encore à la mise en ligne.
- **Vidéo :** utilisez un MP4 à débit élevé à la taille exacte de la plateforme, pour que rien ne soit redimensionné.
- **Taille :** exportez aux dimensions propres à la plateforme, comme 1080×1350 pour une publication Instagram, plutôt que de laisser l’appli recadrer.
- **Vérifiez sur un téléphone :** regardez la version mise en ligne, dans une pièce sombre, luminosité au maximum. C’est là que se cache l’effet de bandes.

Si des bandes survivent à tout cela, [l’effet de bandes des dégradés](https://gradiently.design/fr/guide/gradient-banding) propose des corrections plus poussées.

## FAQ

### Comment réussir un dégradé ?

Utilisez des couleurs qui se mélangent sans griser, placez les arrêts inégalement, éclairez-le d’une seule direction, choisissez franchement un fond sombre ou clair, ajoutez un peu de grain et laissez un espace calme pour les mots.

### Combien de bruit ajouter à un dégradé ?

En général 2 à 6 % d’opacité. Commencez autour de 3 % sur les dégradés sombres et 5 % sur les dégradés pâles, et arrêtez-vous dès que les bandes disparaissent.

### Pourquoi mon dégradé paraît-il boueux ?

Deux couleurs opposées se mélangent en passant par le gris. Ajoutez une couleur de transition entre elles ou mélangez en OKLCH.

### Pourquoi mon dégradé fait-il bon marché ?

Il s’agit probablement de deux couleurs, espacées régulièrement, à 45 degrés, sans grain. Ce sont les réglages par défaut de la plupart des outils, donc ils paraissent irréfléchis.

### Quel format de fichier est le meilleur pour les dégradés ?

Le PNG pour les images fixes et le MP4 à débit élevé pour la vidéo. Le JPEG compressé montre des bandes dans les longs fondus lisses.