# Neuf erreurs de design en dégradé qui donnent un air cheap

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

La plupart des dégradés qui font cheap échouent de l’une de neuf façons prévisibles. Voici chaque erreur, ce qui la cause et le changement précis qui la corrige.

## The short version

- La plupart des erreurs de design en dégradé viennent d’une poignée de causes : des couleurs qui passent par le gris, trop de repères, du banding visible, un texte peu contrasté et des préréglages laissés tels quels.
- Un dégradé entre deux teintes opposées vire souvent au gris au milieu en sRGB, ce que l’on corrige avec un repère central ou une interpolation OKLCH.
- Le banding se voit comme des rayures dans les dégradés lents, sombres ou subtils, et une légère couche de grain ou de tramage le masque en général.
- Le texte sur un dégradé demande de vérifier le contraste au pire point, pas au meilleur, car le fond change sous chaque lettre.
- Un dégradé paraît coûteux quand il a une structure claire, trois à cinq couleurs apparentées, une texture constante et une raison d’exister.

Les **erreurs de design en dégradé** les plus courantes sont les milieux gris et boueux, trop de couleurs, le banding visible, le texte qui disparaît, les repères durs, la surcharge arc-en-ciel, un grain qui ne va pas, les préréglages laissés tels quels et un style identique à celui de tout le monde. Chacune a une cause précise et un remède précis. Aucune ne demande un nouvel outil, seulement un regard plus attentif sur ce que fait le fondu entre ses repères.

Ce guide reprend les neuf dans l’ordre où on les rencontre en général, des calculs de couleur jusqu’à l’identité. Si vous voulez d’abord les bases, lisez [ce qu’est un dégradé](https://gradiently.design/fr/guide/what-is-a-gradient).

## Erreur 1 : un milieu gris et boueux

Fondez deux couleurs de côtés opposés du cercle chromatique, comme bleu et orange, et le point médian en sRGB est un gris-brun terne. Le navigateur fait la moyenne des canaux rouge, vert et bleu, et la moyenne de deux complémentaires est proche du neutre. Le résultat ressemble à une bavure entre deux belles couleurs.

- Avant : bleu à l’ambre, direct: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Après : par un point médian magenta: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Après : interpolé en OKLCH: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

Les deux mêmes extrémités, trois résultats. Un repère central ou l’interpolation OKLCH garde le milieu saturé.

Corrigez-le en faisant passer le fondu par une couleur située entre les deux sur le cercle, ou en interpolant dans un espace perceptuel. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) couvrent les deux méthodes, et [OKLCH en CSS](https://gradiently.design/fr/guide/css-gradient-oklch) explique la syntaxe.

## Erreur 2 : trop de couleurs

Chaque couleur ajoutée est une transition de plus que l’œil doit lire. Au-delà de quatre ou cinq repères, un dégradé cesse de se lire comme de la lumière qui tombe sur une surface et commence à se lire comme un tableau de bandes. Il devient aussi impossible à reproduire deux fois de la même façon.

- Sept repères : chargé: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Trois repères apparentés : calme: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Trois couleurs apparentées donnent plus de profondeur que sept sans lien.

Choisissez une famille de teintes, ajoutez un parent plus clair et un plus sombre, puis autorisez au plus un accent. L’approche des [couleurs analogues](https://gradiently.design/fr/guide/analogous-colors) est le point de départ le plus sûr.

## Erreur 3 : des rayures de banding

Le banding est l’escalier de paliers visibles que l’on voit dans un dégradé lent, surtout sombre. Un canal 8 bits a 256 niveaux, et quand un fondu parcourt une courte distance de couleur sur une large zone, chaque niveau devient une bande de plusieurs pixels de large. Une forte compression JPEG l’aggrave.

```css
.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Une fine couche de bruit à environ 8 % d’opacité brise les bandes sans paraître sale.

Le grain marche parce qu’il disperse les pixels sur des niveaux voisins : le bord entre deux bandes disparaît. Exportez en PNG ou en JPEG de haute qualité. [Le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) détaille les réglages d’export.

## Erreur 4 : un texte qui disparaît sur le dégradé

Un dégradé change sous chaque lettre. Un texte blanc peut se lire magnifiquement sur l’extrémité sombre d’un fondu et disparaître sur l’extrémité claire de la même ligne. Les designers vérifient le titre là où il est le plus beau, et les lecteurs le rencontrent là où il est le pire.

Un post en portrait avec un titre posé directement sur un dégradé chargé, certaines lettres perdant leur contraste

Le fond traverse les mots, si bien que certaines lettres reposent sur une couleur vive.

Le même post en portrait avec le dégradé qui s’installe dans une zone calme et plus sombre derrière le titre

Le même design avec la partie calme du champ déplacée derrière le texte.

Vérifiez le contraste au point le plus vif derrière un texte clair, ou au point le plus sombre derrière un texte foncé. Les WCAG demandent 4,5:1 pour le texte courant et 3:1 pour le grand texte ; [le contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) explique les chiffres et [le texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) traite du placement.

## Erreur 5 : des repères durs et accidentels

Quand deux repères sont à quelques pour cent l’un de l’autre, le fondu bascule d’une couleur à l’autre et trace une ligne que personne n’a demandée. Les repères durs sont utiles exprès, pour des rayures et des graphiques, mais une jonction accidentelle se lit comme une erreur.

- Repères à 8 % : jonction visible: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Repères espacés : lumière douce: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

Laissez chaque transition prendre une vraie place dans le champ.

## Erreur 6 : la surcharge arc-en-ciel

Un spectre complet est la chose la plus bruyante qu’un dégradé puisse faire, et il dit rarement quelque chose de la marque qui l’utilise. Il porte aussi les associations de chaque teinte à la fois. Si vous voulez un arc-en-ciel, utilisez-en un court arc et maîtrisez la luminosité. [Les dégradés arc-en-ciel](https://gradiently.design/fr/guide/rainbow-gradient) montrent des versions de bon goût.

## Erreur 7 : un grain qui ne va pas

### À éviter

- Un grain gros sur le post, fin sur la story, aucun sur les diapos
- Du grain appliqué sur le texte et les logos
- Un grain si lourd qu’il se lit comme un objectif sale
- Agrandir une texture de grain jusqu’à ce que chaque grain devienne une tache

### À faire

- Une seule taille et force de grain pour tous les formats
- Du grain sur le seul calque de fond
- Juste assez pour briser le banding et donner du grain
- Un grain généré à la taille d’export, pas étiré

La texture fait partie d’un style : un grain incohérent donne donc à une série de designs l’air de venir de trois endroits. [Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) traitent de la quantité à utiliser.

## Erreur 8 : livrer le préréglage tel quel

La plupart des outils offrent les mêmes fondus à deux couleurs à 135 degrés. Ils paraissent corrects, ce qui explique qu’ils soient partout. Un préréglage est un point de départ : décalez une couleur, ajoutez un troisième repère, changez la direction pour convenir à la mise en page et ajoutez une matière. [Utiliser un générateur de dégradés](https://gradiently.design/fr/guide/gradient-generator) passe ces retouches en revue.

## Erreur 9 : ressembler à tout le monde

La dernière erreur est la plus coûteuse. Un dégradé bien fait mais identique en esprit à celui de tous les concurrents ne travaille pas pour la reconnaissance. Le remède est la constance plus quelque chose de difficile à copier, comme une matière, une façon de bouger ou de faire de la place aux mots. [L’identité de marque en dégradé](https://gradiently.design/fr/guide/gradient-branding) explique comment en posséder un.

| Erreur | Remède rapide |
| --- | --- |
| Milieu gris | Repère central ou interpolation OKLCH |
| Trop de couleurs | Une famille de teintes plus un accent |
| Banding | Grain fin, export PNG ou de haute qualité |
| Texte illisible | Vérifier le contraste au pire point |
| Repères durs | Espacer les repères, sauf si le bord est voulu |
| Surcharge arc-en-ciel | Utiliser un court arc du spectre |
| Grain incohérent | Une recette de grain pour tous les formats |
| Préréglage tel quel | Changer couleur, repères, direction et texture |
| Pareil que tout le monde | Ajouter une matière et la garder constante |

Les neuf remèdes sur une page.

## FAQ

### Pourquoi mon dégradé paraît-il gris au milieu ?

Des couleurs de côtés opposés du cercle donnent en moyenne un quasi-neutre en sRGB. Ajoutez un repère central dans une teinte située entre elles, ou interpolez en OKLCH.

### Comment empêcher un dégradé de former des bandes ?

Ajoutez une fine couche de bruit ou de grain à faible opacité, évitez la forte compression JPEG et donnez aux dégradés sombres une plage de luminosité plus large à parcourir.

### Combien de couleurs pour un dégradé ?

En général deux à quatre couleurs apparentées, avec au plus un accent. Au-delà de cinq repères, la plupart des dégradés commencent à paraître chargés.

### Comment rendre un texte lisible sur un dégradé ?

Placez le texte sur la partie la plus calme du champ et vérifiez le contraste là où le fond est le plus proche de votre texte en luminosité. Visez 4,5:1 pour le texte courant et 3:1 pour le grand texte.

### Les préréglages de dégradé sont-ils mauvais ?

Non, mais beaucoup de gens les partagent. Prenez un préréglage comme point de départ et changez ses couleurs, ses repères, sa direction et sa texture avant de l’utiliser.