LABO CODE COULEUR

Générateur de dégradés

Composer un dégradé linéaire entre deux couleurs, régler son angle et copier une déclaration CSS immédiatement exploitable.

linear-gradient(125deg, #E64040, #334FC4)

RÉPONSE DIRECTE

Le générateur produit un linear-gradient CSS à deux arrêts. La transition calculée par le navigateur peut traverser des zones moins lisibles ou moins harmonieuses que les extrémités.

01Sortielinear-gradient CSS
02RéglagesDeux couleurs et un angle
03ContrôleToute la transition, pas seulement les bords
01

Régler la direction

L’angle définit l’orientation de la ligne de dégradé. Testez-le dans le bloc final : le même angle produit une sensation différente dans une bannière très large, une carte carrée ou un petit bouton.

Copiez la déclaration puis rattachez-la à une classe ou à un token de thème, plutôt que de multiplier des valeurs isolées dans le code.

02

Contrôler les couleurs intermédiaires

Le navigateur interpole entre les arrêts selon les règles CSS et l’espace utilisé. Le milieu peut perdre en saturation, traverser une zone terne ou créer une bande dont le contraste avec le texte est insuffisant.

Si le trajet compte, ajoutez des arrêts contrôlés dans votre code ou utilisez une interpolation adaptée. Vérifiez aussi les écrans où des bandes de quantification peuvent apparaître.

03

Accessibilité et performance

Un texte posé sur un dégradé doit rester lisible au point le plus défavorable. Pour transmettre une progression de données, ne comptez pas seulement sur la teinte : ajoutez valeurs, repères ou libellés.

Un dégradé CSS est généralement plus léger qu’une image décorative équivalente, mais il ne remplace pas une vraie image lorsque le contenu visuel a un sens.

Méthode et révision

Les calculs sont exécutés dans le navigateur à partir des valeurs saisies. Les limites propres à cet outil sont indiquées ci-dessus ; la méthode générale et les formules sont documentées dans le référentiel.

Révision éditoriale : 22 août 2026 · Direction éditoriale : Nicolas Belotti · Signaler une erreur.

MODE D’EMPLOI VÉRIFIABLE

Ce que l’outil accepte, calcule et ne décide pas

Entrée fiable

Deux ou plusieurs couleurs sources et une direction choisie pour le composant réel.

Résultat obtenu

Une interpolation CSS dont les étapes dépendent de l’espace et du navigateur pris en charge.

Décision suivante

Inspecter les zones médianes, le banding et le contraste du contenu placé sur toute la longueur.

Méthode, confidentialité et limites

Le calcul est exécuté dans votre navigateur à partir des valeurs saisies. Les images, lorsqu’elles sont utilisées, ne quittent pas l’appareil. Le résultat décrit un modèle colorimétrique et ne remplace pas un contrôle du support, du profil, de la lumière ou du contexte d’accessibilité.