Dégradés CSS
Les dégradés CSS affichent des transitions progressives entre deux couleurs ou plus. Découvrez les types de dégradés, leur usage et des exemples.
Un dégradé CSS est une image générée par le navigateur qui affiche une transition progressive et fluide entre deux couleurs ou plus. Comme un dégradé est techniquement une <image>, vous pouvez l'utiliser partout où CSS attend une valeur d'image — le plus souvent sur la propriété background-image, mais cela fonctionne aussi pour border-image, list-style-image et mask-image.
Les dégradés sont indépendants de la résolution (ils s'adaptent à n'importe quelle taille sans perte de qualité) et n'engendrent aucune requête HTTP supplémentaire, ce qui en fait une alternative légère aux fichiers image pour les arrière-plans, les boutons, les superpositions et les formes décoratives.
Cette page couvre les trois fonctions de dégradé définies par CSS, avec des exemples exécutables pour chacune :
- Dégradés linéaires — les couleurs s'écoulent le long d'une ligne droite.
- Dégradés radiaux — les couleurs rayonnent depuis un point central.
- Dégradés coniques — les couleurs tournent autour d'un point central.
Chaque fonction dispose également d'une variante repeating-* qui répète le dégradé en mosaïque au lieu de l'étirer une seule fois sur la boîte.
Dégradés linéaires
La fonction linear-gradient() crée une image dont les couleurs font la transition le long d'une ligne droite. Vous contrôlez deux choses : la direction de cette ligne et la liste des points de couleur placés le long de celle-ci. Sans direction spécifiée, la ligne va du haut vers le bas de la boîte.
Syntaxe du dégradé linéaire
background-image: linear-gradient(direction, color1, color2, ...);direction est optionnel. Il peut être un mot-clé (to right, to bottom left) ou un angle (90deg). Tout ce qui suit est la liste séparée par des virgules des couleurs. Toute couleur CSS valide fonctionne, y compris les couleurs nommées, le hex, rgb() et hsl().
De haut en bas
Les dégradés linéaires vont de haut en bas par défaut, vous pouvez donc omettre entièrement la direction.
Exemple de dégradé linéaire de haut en bas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>La déclaration background-color sert de repli : les très anciens navigateurs qui ne comprennent pas le dégradé ignorent la ligne background-image et reviennent à la couleur unie, de sorte que le texte reste lisible.
De gauche à droite
Ajoutez le mot-clé to right pour faire pivoter la ligne afin que la première couleur soit sur le bord gauche et la dernière sur le bord droit.
Exemple de dégradé linéaire de gauche à droite
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #0052b0 ,#b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Dégradés diagonaux
Combinez un mot-clé vertical et horizontal (par exemple to bottom right) pour faire courir la ligne en diagonale à travers la boîte, d'un coin à l'autre.
Exemple de dégradé diagonal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to bottom right, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Utilisation des angles
Pour un contrôle total sur la direction, indiquez un angle au lieu d'un mot-clé. L'angle est mesuré dans le sens des aiguilles d'une montre depuis la direction « vers le haut » : 0deg pointe la ligne de dégradé vers le haut (les couleurs vont de bas en haut), 90deg la pointe vers la droite (de gauche à droite), 180deg vers le bas. Les angles négatifs pivotent dans le sens inverse des aiguilles d'une montre.
Exemple de dégradé linéaire avec un angle spécifié
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(70deg, #0052b0, #b340b3);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Plusieurs couleurs
Un dégradé accepte n'importe quel nombre de couleurs. Elles sont espacées uniformément par défaut, chaque couleur se fondant progressivement dans la suivante.
Exemple de dégradé linéaire avec plusieurs couleurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(#f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Vous pouvez combiner une direction avec plusieurs couleurs, et épingler chaque couleur à une position spécifique. Une position est un pourcentage (0% correspond au début de la ligne, 100% à la fin) ou une longueur absolue. Donner deux positions à une couleur crée une bande uniforme de cette couleur entre elles.
Exemple de dégradé linéaire avec plusieurs couleurs de gauche à droite
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to right, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Exemple de dégradé linéaire avec plusieurs couleurs de droite à gauche
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 300px;
background-color: blue;
background-image: linear-gradient(to left, #f50707, #f56e00,#f7df00, #66f507, #0052b0, #520f41, #ff0856);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Transparence
Les points de couleur peuvent être partiellement ou totalement transparents, ce qui est utile pour estomper un arrière-plan vers ce qui se trouve derrière. Utilisez rgba() (ou toute couleur avec un canal alpha) et définissez l'alpha de 0 (totalement transparent) à 1 (totalement opaque). C'est la méthode standard pour appliquer une superposition lisible sur une photo.
Exemple de dégradé linéaire d'une couleur pleine vers le transparent
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-image: linear-gradient(to left, rgba(235, 117, 253, 0), rgba(235, 117, 253, 1));
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Dégradé linéaire répété
repeating-linear-gradient() répète un motif de dégradé en mosaïque sur la boîte au lieu de l'étirer une seule fois. La taille d'une répétition est définie par la position du dernier point de couleur — ici 10%, donc le motif à trois couleurs se répète tous les 10% de la ligne. C'est pratique pour les rayures et les textures de barre de progression.
Exemple de dégradé linéaire répété
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 200px;
background-color: blue;
background-image: repeating-linear-gradient(55deg, #d5b6de, #6c008a 7%, #036ffc 10%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Dégradés radiaux
Un dégradé radial rayonne depuis un point central, avec la première couleur au centre et la dernière sur le bord. Au moins deux points de couleur sont requis. Le dégradé peut avoir la forme d'un circle (cercle) ou d'une ellipse (la valeur par défaut).
Syntaxe du dégradé radial
background-image: radial-gradient(shape size at position, start-color, ..., last-color);La partie shape size at position est optionnelle. Lorsqu'elle est omise, vous obtenez une ellipse farthest-corner centrée dans la boîte.
Exemple de dégradé radial avec trois couleurs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509, #fff700, #05ff33);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Positionnement des points de couleur radiaux
Comme pour les dégradés linéaires, vous pouvez épingler chaque couleur à un pourcentage ou une longueur absolue pour contrôler quelle portion du rayon elle occupe.
Exemple de points de couleur espacés différemment
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient( #ff0509 10%, #fff700 20%, #05ff33 80%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Positionnement du centre
Utilisez le mot-clé at pour déplacer le centre du dégradé hors du milieu de la boîte, en utilisant des pourcentages ou des longueurs absolues.
Exemple de dégradé radial avec centre positionné
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background-image: radial-gradient(at 0% 30%, #ff0509 10px, #fff700 30%, #05ff33 50%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Forme du dégradé radial
Le paramètre de forme est soit circle soit ellipse. Une ellipse (la valeur par défaut) s'étire pour correspondre au rapport d'aspect de la boîte ; un cercle reste parfaitement rond quelle que soit la largeur et la hauteur de la boîte.
Exemple de forme de dégradé radial
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(red, yellow, green);
}
.gradient2 {
height: 150px;
width: 200px;
background-color: blue;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h2>Ellipse:</h2>
<div class="gradient1"></div>
<h2>Circle:</h2>
<div class="gradient2"></div>
</body>
</html>Dimensionnement du dégradé radial
Le mot-clé de taille détermine où se termine le dernier point de couleur — c'est-à-dire jusqu'où le dégradé se propage avant de s'arrêter. Il existe quatre mots-clés, mesurés depuis le centre du dégradé :
closest-side— se termine au bord le plus proche de la boîte.closest-corner— se termine au coin le plus proche.farthest-side— se termine au bord le plus éloigné.farthest-corner— se termine au coin le plus éloigné. C'est la valeur par défaut.
Exemple de dégradés radiaux avec taille spécifiée
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient1 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient2 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-side at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient3 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(closest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
.gradient4 {
height: 150px;
width: 150px;
background-color: blue;
background-image: radial-gradient(farthest-corner at 60% 55%, #ff0509, #fff700, #103601);
}
</style>
</head>
<body>
<h2>closest-side:</h2>
<div class="gradient1"></div>
<h2>farthest-side:</h2>
<div class="gradient2"></div>
<h2>closest-corner:</h2>
<div class="gradient3"></div>
<h2>farthest-corner:</h2>
<div class="gradient4"></div>
</body>
</html>Dégradé radial répété
repeating-radial-gradient() répète le motif radial vers l'extérieur en anneaux depuis le centre. Comme pour la version linéaire, la position du dernier point de couleur définit la taille d'un anneau.
Exemple de dégradé radial répété
<!DOCTYPE html>
<html>
<head>
<style>
.gradient {
height: 200px;
width: 200px;
background-color: blue;
background-image: repeating-radial-gradient(#f70000, #f7da00 10%, #005cfa 15%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Dégradés coniques
Un dégradé conique fait tourner ses couleurs autour d'un point central, comme les aiguilles d'une horloge balayant le spectre. Là où un dégradé radial change de couleur en se déplaçant vers l'extérieur, un dégradé conique change de couleur en se déplaçant autour. Cela en fait l'outil idéal pour les graphiques en secteurs, les roues chromatiques et les accents angulaires.
Syntaxe du dégradé conique
background-image: conic-gradient(color1, color2);Les points de couleur sont positionnés par angle (deg) plutôt que par longueur. Le dégradé commence en haut (0deg) et tourne dans le sens des aiguilles d'une montre.
Exemple de dégradé conique de base
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(#ff0000, #fff200);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Positionnement du centre conique
Comme pour les dégradés radiaux, le mot-clé at déplace le point central du balayage en utilisant des pourcentages ou des longueurs absolues.
Exemple de dégradé conique avec centre positionné
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(at 0% 50%, red 10%, yellow 30%, #1eff00 60%);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Modification de l'angle
Le mot-clé from fait pivoter l'ensemble du balayage, décalant l'emplacement du point de départ à 0deg.
Exemple de dégradé conique avec angle pivoté
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: conic-gradient(from 35deg, #ff0000, #ffa600, #fcf000, #03ff0f, #be05fc, #ff0095);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Dégradé conique répété
repeating-conic-gradient() répète le motif angulaire autour du cercle, ce qui est la méthode classique pour créer des effets en étoile et en damier.
Exemple de dégradé conique répété
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.gradient {
height: 250px;
width: 250px;
background-color: blue;
background: repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg);
}
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>Compatibilité navigateurs et conseils
Les dégradés linéaires et radiaux sont pris en charge dans tous les navigateurs modernes. Les dégradés coniques sont plus récents — ils fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari, mais si vous devez prendre en charge de très anciens navigateurs, associez le dégradé à une couleur de fond background-color de repli comme indiqué précédemment.
Quelques conseils pratiques :
- Superposez des dégradés. La propriété
background-imageaccepte une liste séparée par des virgules, vous pouvez donc superposer plusieurs dégradés (le premier listé est au-dessus). Combinez des dégradés transparents avec une photo pour créer des superpositions. - Utilisez
hsl()pour des transitions plus fluides. L'interpolation entre des teintes très différentes en hex peut passer par des gris ternes ; choisir des teintes proches, ou utiliserhsl(), maintient des transitions nettes. - Performance. Les dégradés sont peu coûteux, mais les animer repeint toute la boîte. Préférez animer
transform/opacityplutôt que le dégradé lui-même pour des mouvements fluides.
Sujets connexes
background-image— la propriété sur laquelle les dégradés sont le plus souvent appliqués.background-size— contrôle la taille d'une couche de dégradé pour permettre la répétition en mosaïque.- Couleurs CSS et noms de couleurs CSS — les valeurs de couleur que vous placez dans les dégradés.
- Transitions CSS — pour animer d'autres propriétés en parallèle avec des arrière-plans dégradés.