L’essentiel en bref
- 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.
Sur cette page
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.
Le test
En cas d’échec
Le test
En cas d’échec
Le test
En cas d’échec
Le test
En cas d’échec
En cas d’échec
Le test
En cas d’échec
Le test
En cas d’échec
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 et l’interpolation des dégradés expliquent les deux.
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é approfondit le placement et les points de transition.
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 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.
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.
.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;
}D’autres recettes de grain se trouvent dans les dégradés granuleux et la texture de bruit en CSS.
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.
Échoue à la vérification 6 : la couleur traverse directement les mots.
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 propose des corrections plus poussées.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil