À propos de cet outil
Un dégradé CSS est une image générée par le navigateur qui passe en douceur d'une couleur à une autre, déclarée avec les fonctions linear-gradient(), radial-gradient() ou conic-gradient(). Chaque point de couleur associe une couleur à une position facultative (un pourcentage le long de la ligne ou de l'arc du dégradé), et les dégradés linéaires et coniques ajoutent un angle qui définit la direction de la transition, tandis que les dégradés radiaux prennent une forme (cercle ou ellipse) et une position pour leur origine.
Utilisez-le pour concevoir des arrière-plans de héros, des remplissages de boutons, des superpositions de cartes et des accents de séparateur sans peaufiner la syntaxe à la main : choisissez un type, faites glisser l'angle, ajoutez jusqu'à six points, et copiez la déclaration background prête à coller. L'aperçu repose sur un damier afin que vous puissiez voir comment les points semi-transparents se composent, et les préréglages vous offrent des palettes éprouvées à deux et trois points pour démarrer.
Les dégradés sont rendus comme des images CSS, ils n'ont donc pas de taille intrinsèque — définissez une largeur et une hauteur (ou utilisez-les comme arrière-plan), sans quoi l'élément se réduit et vous ne verrez rien.
Questions fréquentes
Quelle est la différence entre les dégradés linéaires, radiaux et coniques en CSS ?
Un dégradé linéaire fait passer les couleurs le long d'une ligne droite selon un angle donné, un dégradé radial rayonne vers l'extérieur depuis un point central sous forme de cercle ou d'ellipse, et un dégradé conique balaie les couleurs autour d'un point central comme les aiguilles d'une horloge, ce qui explique qu'il soit souvent utilisé pour des roues chromatiques et des effets de camembert.
Comment fonctionnent les angles des dégradés CSS ?
Pour linear-gradient(), un angle de 0deg oriente le dégradé droit vers le haut (vers le sommet), 90deg vers la droite, 180deg vers le bas et 270deg vers la gauche, en augmentant dans le sens horaire. Pour conic-gradient(), la valeur from <angle> ne fait que faire pivoter la position de départ du balayage de couleurs autour du centre.
Puis-je utiliser plus de deux couleurs dans un dégradé CSS ?
Oui. Un dégradé accepte un nombre quelconque de points de couleur séparés par des virgules, chacun assorti d'une position facultative comme #f00 0%, #ff0 50%, #00f 100%. Les points sont placés dans l'ordre où vous les écrivez, et ce générateur en prend en charge jusqu'à six.