Dégradé CSS

Génère le code CSS d'un dégradé linéaire à partir de deux couleurs et d'un angle. L'aperçu se met à jour en direct et le code produit est prêt à être collé dans ta feuille de style, sans préfixe navigateur inutile.

Comment utiliser

1. Saisis la couleur de départ et la couleur d'arrivée en hexadécimal.
2. Règle l'angle en degrés : 90 donne un dégradé de gauche à droite, 180 de haut en bas.
3. Contrôle le rendu dans l'aperçu.
4. Copie le code CSS et colle-le dans ta feuille de style.

Cas d'usage courants

• Tu veux un fond de bannière ou de section un peu moins plat qu'un aplat de couleur.
• Tu cherches le code exact d'un dégradé de bouton repéré sur une maquette.
• Tu prépares une image de fond légère, sans passer par un fichier PNG ou JPEG.
• Tu testes plusieurs combinaisons de couleurs avant d'arrêter une charte.

Comment lire l'angle et éviter la zone grise

Dans la spécification CSS, l'angle indique la direction vers laquelle va le dégradé, pas celle d'où il part : 0deg va vers le haut, 90deg vers la droite, 180deg vers le bas. C'est l'inverse de la convention retenue par certains outils de design, d'où des dégradés qui semblent retournés au moment de l'intégration. Autre point à surveiller : le navigateur interpole entre les deux couleurs dans l'espace sRGB, et deux teintes opposées sur le cercle chromatique — un bleu et un jaune, par exemple — passent alors par un gris terne au milieu. Si le résultat paraît sale, ajoute une couleur intermédiaire choisie à la main plutôt que de laisser le navigateur trouver le chemin tout seul.

Outils associés

Questions fréquentes

Quels formats de couleur Dégradé CSS prend-il en charge ?

Le HEX sous ses formes à trois, six et huit chiffres, le RGB et le RGBA, ainsi que le HSL et le HSLA. Les valeurs transitent par une représentation interne commune : passer d'un format à l'autre puis revenir n'introduit donc aucune dérive.

Quel rapport de contraste faut-il pour passer les tests d'accessibilité ?

Le niveau AA du WCAG 2.1 exige 4,5 pour 1 pour le texte courant et 3 pour 1 pour le grand texte, c'est-à-dire à partir de 18,66 pixels en gras ou 24 pixels en romain. Le niveau AAA porte ces seuils à 7 pour 1 et 4,5 pour 1.

Puis-je coller le résultat directement dans du CSS ?

Oui. Les valeurs générées sont une syntaxe de couleur CSS valide et se collent telles quelles dans une feuille de styles, un fichier de jetons de design ou le style en ligne d'un composant.