Générateur de dégradés CSS

Ajoutez deux couleurs ou plus pour générer instantanément le code CSS d'un linear-gradient ou radial-gradient avec aperçu en direct. Ajustez librement l'angle et les positions, puis copiez le code en un clic.

Dernière mise à jour : 2026-09-06

Ce qu’est un dégradé CSS

Un dégradé CSS est une manière de dessiner une bande ou une nappe rayonnante de deux couleurs ou plus se fondant l’une dans l’autre, à l’aide d’une seule feuille de style et sans aucune image. linear-gradient() déplace les couleurs en ligne droite suivant l’angle que vous indiquez ; radial-gradient() les répand depuis un centre en cercles. Écrit en texte, cela reste léger, ne devient pas grossier à l’agrandissement, et changer une couleur revient à modifier une valeur.

Cet outil vous laisse régler le type, l’angle et les arrêts de couleur à l’écran, suivre le résultat à mesure et copier le CSS achevé tel quel. Vous pouvez poser jusqu’à six arrêts, chacun avec sa couleur et sa position en pour cent ; moins de deux ne forment aucun dégradé et déclenchent un message. Notez que le CSS mesure l’angle à sa façon : 0deg va du bas vers le haut et 90deg de la gauche vers la droite, de sorte que le zéro pointe ailleurs que dans les mathématiques ordinaires. Le dégradé radial n’a pas de notion d’angle : ce réglage n’a donc aucun effet sur lui.

Comment bâtir un dégradé CSS

Choisissez le type Prenez linéaire si vous voulez que les couleurs se déplacent en ligne droite, radial si vous voulez qu’elles se répandent depuis un centre.
Réglez l’angle Cela ne vaut que pour le type linéaire. 0deg va du bas vers le haut et 90deg de la gauche vers la droite, en croissant dans le sens des aiguilles. Déplacez le curseur et voyez la direction s’établir.
Posez les arrêts de couleur « Ajouter une couleur » vous mène jusqu’à six. Donnez à chaque arrêt une couleur et une position en pour cent, et vous maîtrisez finement l’endroit où une couleur cède à la suivante.
Vérifiez l’aperçu L’aperçu se redessine à chaque changement : vous jugez sur-le-champ si une limite est trop brusque ou si la direction est celle que vous vouliez.
Copiez le CSS « Copier le CSS » le place dans le presse-papiers, prêt à être collé dans le background de votre feuille de style.

Astuces pour en tirer le meilleur parti

Vous pouvez ajouter jusqu'à 6 points de couleur et ajuster librement la couleur et la position (%) de chacun pour créer des dégradés complexes à plusieurs couleurs.
Pour un dégradé linéaire, 0 degré correspond au bas vers le haut et 90 degrés à la gauche vers la droite ; utilisez le curseur pour un réglage intuitif.
Les dégradés radiaux n'ont pas d'angle : les couleurs rayonnent plutôt depuis le centre vers l'extérieur de façon circulaire.
Cliquez sur « Copier le CSS » pour copier le code généré directement dans le presse-papiers et le coller dans votre feuille de style.

Où les dégradés CSS sont utiles

Donner du relief à un bouton ou à une pastille

Un dégradé linéaire qui fonce légèrement du haut vers le bas rend une commande plus « pressable » qu’un aplat. Garder un faible écart entre les couleurs est ce qui préserve le naturel.

Composer un fond d’en-tête

Étendez un dégradé de deux couleurs ou plus sur le large bandeau du haut de page et vous obtenez un fond marquant sans charger la moindre image – et sans ralentir la page.

Un effet de projecteur

Un dégradé radial clair au centre et sombre aux bords se lit comme une lumière tombant sur la surface.

Poser du texte sur une photographie

Superposez un dégradé linéaire allant du noir semi-transparent au transparent complet et le texte demeure lisible même sur les parties claires de l’image.

Quand ce sont les couleurs que vous arrêtez

Pour choisir ce que vous mettrez à chaque arrêt, servez-vous du convertisseur de codes couleur ; pour réfléchir aux associations, de la palette de couleurs.

Termes relatifs aux dégradés CSS

linear-gradient: La fonction CSS qui dessine un dégradé dont les couleurs se déplacent en ligne droite suivant un angle donné. Elle convient aux fonds en bandeau et au remplissage d’un bouton.
radial-gradient: La fonction CSS qui dessine un dégradé se répandant depuis un centre en cercles ou en ellipses. Elle n’a pas de notion d’angle.
Arrêt de couleur: Indication plaçant une couleur donnée en un point donné du dégradé. La position s’exprime en pour cent, le départ à 0 % et l’arrivée à 100 %.
Angle (deg): La direction dans laquelle voyagent les couleurs d’un dégradé linéaire. En CSS, 0deg va du bas vers le haut et 90deg de la gauche vers la droite, en croissant dans le sens des aiguilles : le zéro pointe ailleurs que dans les mathématiques ordinaires.
Préfixe propriétaire: Un préfixe tel que -webkit-, ajouté à l’époque où chaque navigateur offrait une nouveauté à sa manière avant la normalisation. Les dégradés sont normalisés depuis longtemps : aucun préfixe n’est nécessaire.
La propriété background: La propriété CSS qui fixe le fond d’un élément. Un dégradé compte pour une sorte d’image de fond, d’où son écriture ici.

Questions fréquentes

linear-gradient fait passer les couleurs en ligne droite selon un angle défini, ce qui est courant pour les boutons ou les fonds en bande. radial-gradient, lui, diffuse les couleurs depuis un point central de façon circulaire ou elliptique, ce qui convient bien aux effets de projecteur ou de profondeur.

Dans linear-gradient() en CSS, l'angle est exprimé en degrés (deg). 0deg va du bas vers le haut, 90deg de la gauche vers la droite et 180deg du haut vers le bas. Notez que CSS mesure les angles dans le sens horaire, ce qui diffère de la convention mathématique habituelle où 0 degré pointe vers la droite.

Le pourcentage de chaque point de couleur indique à quelle position du dégradé — du début (0 %) à la fin (100 %) — cette couleur est placée. En décalant les positions, on peut créer des zones où la couleur change progressivement et d'autres où elle change brusquement.

linear-gradient et radial-gradient fonctionnent sans préfixe de fournisseur dans tous les navigateurs principaux, dont Chrome, Firefox, Safari et Edge, et même sous IE10. Aucun ajustement supplémentaire n'est nécessaire, sauf pour prendre en charge de très anciens navigateurs mobiles.

Anecdote — pourquoi les dégradés CSS ont remplacé les images en dégradé

Avant CSS3, les fonds en dégradé sur le web étaient généralement créés sous forme d'images PNG ou JPEG réalisées dans un logiciel de retouche d'image. Cette approche présentait de vrais inconvénients : des requêtes supplémentaires ralentissant le chargement de la page, un rendu flou lors de l'agrandissement dans une mise en page responsive, et la nécessité de réexporter toute l'image pour modifier une seule couleur.

Lorsque les navigateurs ont implémenté la syntaxe linear-gradient et radial-gradient au début des années 2010, ces problèmes ont largement disparu. Comme les dégradés sont entièrement décrits en texte, ils sont légers, restent nets à n'importe quelle taille et peuvent être recolorés en modifiant simplement quelques valeurs dans la feuille de style.

Les premières implémentations nécessitaient des préfixes de fournisseur différents (-webkit-, -moz-, -o-, etc.) et une syntaxe légèrement différente selon le navigateur, obligeant les développeurs à écrire plusieurs versions préfixées de la même règle. Désormais que la syntaxe a été standardisée par le W3C, la version sans préfixe fonctionne de manière cohérente dans tous les navigateurs principaux.

Voir toutes les anecdotes