Comment créer un dégradé CSS (et copier un code propre)

Une couleur unie fait l’affaire, mais c’est un dégradé bien dosé qui donne à une section d’en-tête, à un bouton ou à une carte une allure aboutie. L’ennui, c’est qu’écrire la syntaxe d’un dégradé de mémoire est délicat, et une seule valeur erronée vous donne une ligne nette au lieu d’un fondu doux. Ce guide explique comment fonctionnent réellement les dégradés CSS et comment en construire un visuellement, puis copier un code propre que vous pouvez coller directement dans votre feuille de style.

Les deux dégradés que vous utiliserez le plus

Le CSS propose plusieurs types de dégradés, mais deux couvrent presque tout :

• Le dégradé linéaire mélange les couleurs le long d’une ligne droite. Vous définissez l’angle (ou un mot-clé comme to right) et les couleurs s’écoulent le long de celle-ci. C’est votre choix de prédilection pour les arrière-plans, les boutons et les bannières.
• Le dégradé radial se mélange vers l’extérieur depuis un point central, en cercle ou en ellipse. Il est parfait pour les projecteurs, les halos et les arrière-plans à point focal doux.

Les deux sont construits à partir de points d’arrêt de couleur (color stops) : une liste de couleurs et, en option, la position de chacune le long de la ligne.

Comment construire un dégradé dans votre navigateur

Le Générateur de Dégradés CSS gratuit vous laisse en concevoir un à l’œil et vous remet le code, pour que vous n’ayez jamais à deviner la syntaxe.

1. Ouvrez l’outil et choisissez votre type de dégradé, linéaire ou radial.
2. Choisissez vos couleurs et faites glisser les points d’arrêt jusqu’à ce que le fondu vous convienne.
3. Ajustez l’angle ou la position selon votre goût.
4. Copiez le CSS généré et collez-le dans votre feuille de style.

Ce que vous voyez dans l’aperçu en direct est exactement ce qui sera publié, il n’y a donc aucun tâtonnement dans les outils de développement du navigateur par la suite.

Lire le code qu’il vous donne

Un dégradé linéaire simple ressemble à ceci :

background: linear-gradient(90deg, #2b59ff, #7c3aed);

Cela se lit ainsi : fondu du bleu au violet, de gauche à droite (90 degrés). Ajoutez une troisième couleur ou déplacez les points d’arrêt et vous contrôlez exactement où chaque transition se produit. Une version radiale change le mot-clé :

background: radial-gradient(circle, #2b59ff, #1a1a2e);

Comme la sortie est du CSS pur, elle fonctionne dans tous les navigateurs modernes, sans bibliothèque ni étape de compilation.

Conseils pour des dégradés à l’allure professionnelle

• Gardez des teintes proches. Les fondus entre couleurs voisines (bleu vers violet, orange vers rose) paraissent doux. Des couleurs radicalement opposées peuvent virer au terne au milieu.
• Soignez l’angle. Une diagonale subtile (autour de 135 degrés) semble souvent plus naturelle qu’un remplissage plat de haut en bas.
• Utilisez-le avec intention. Un dégradé sur un bouton, accompagné d’un dégradé assorti sur l’arrière-plan, relie un design entre eux. S’il vous faut une ombre assortie, le Générateur de Box Shadow en construit une de la même manière.

Besoin des couleurs dans un autre format ?

Les dégradés sont écrits en hexadécimal par défaut, mais vous pourriez avoir besoin des mêmes couleurs en RGB ou HSL pour un système de design ou un framework. Le Convertisseur de Couleur traduit instantanément entre les formats, afin que vous puissiez déposer les valeurs là où votre projet les attend. Associez un dégradé à des coins arrondis du Générateur de Border Radius et vous obtenez l’allure complète d’une carte moderne en quelques minutes.

Pourquoi un outil de navigateur vaut mieux que mémoriser la syntaxe

Le code d’un dégradé est facile à écrire légèrement de travers, et une petite erreur produit un résultat strié et disgracieux. Le construire visuellement signifie que vous ajustez jusqu’à ce que ce soit beau, puis vous copiez un code garanti conforme à l’aperçu. Tout s’exécute dans la page sur votre propre appareil, il n’y a donc aucun compte, aucun téléversement et rien à installer.

Pour créer un dégradé CSS sans douleur : choisissez le type, réglez vos couleurs et vos points d’arrêt, affinez l’angle et copiez le code. Cela devrait être gratuit et instantané, ce qui est exactement la raison d’être du Générateur de Dégradés CSS.