Développement Web
CSS Gradient Generator
Composer un dégradé linéaire, radial ou conique à partir de plusieurs couleurs et obtenir le CSS prêt à l'emploi.
0° — en haut, puis dans le sens horaire.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Article sur cet outil: Dégradés CSS : en quoi linear diffère de radial et conic
Questions fréquentes
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Les dégradés linéaires transitionnent le long d'une ligne droite selon un angle choisi, les dégradés radiaux s'étendent vers l'extérieur depuis un point central sous forme de cercle ou d'ellipse, et les dégradés coniques balaient les couleurs autour d'un point central comme une roue chromatique.
Les dégradés coniques sont-ils pris en charge par tous les navigateurs ?
Tous les principaux navigateurs actuels prennent en charge les dégradés coniques, mais c'est une fonctionnalité CSS plus récente que les dégradés linéaires ou radiaux, donc les versions de navigateurs très anciennes pourraient ne pas les afficher.
Qu'est-ce que j'obtiens en sortie ?
L'outil génère une syntaxe CSS background prête à l'emploi avec vos couleurs, points d'arrêt et positions choisis, que vous pouvez coller directement dans votre feuille de style.
Quelle est la différence entre repeating-linear-gradient et un linear-gradient classique ?
Un linear-gradient classique étire sa séquence de couleurs exactement une fois sur tout l'élément, tandis que repeating-linear-gradient répète cette même séquence de color stops de façon cyclique, produisant un fond rayé ou à motif.
Puis-je superposer plusieurs dégradés en fond ?
Oui, la propriété background-image accepte une liste de dégradés séparés par des virgules, et ils se superposent en couches de la même façon que plusieurs images de fond — le premier de la liste se retrouve au-dessus.