Générateur de dégradés CSS
Composez un dégradé et copiez le code CSS prêt à l’emploi.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Créez le dégradé parfait, sans écrire une ligne de CSS
Les dégradés sont partout dans le design moderne : arrière-plans de héros, boutons, cartes, textes décoratifs. Ce générateur vous permet de les composer visuellement — couleurs, positions, angle, type — et de copier un code CSS propre, prêt pour la production.
-
Choisissez le type
Linéaire pour une transition directionnelle, radial pour un halo central, conique pour des effets de roue ou de camembert.
-
Ajustez couleurs et positions
Modifiez chaque couleur au sélecteur, déplacez sa position avec le curseur, ajoutez jusqu’à 6 stops. Le bouton Aléatoire propose des combinaisons harmonieuses.
-
Copiez le CSS
Le code est mis à jour en temps réel. Un clic et il est dans votre presse-papiers.
Trois fonctions, trois géométries
| Fonction | Géométrie | Usage typique |
|---|---|---|
| linear-gradient(angle, …) | Ligne droite orientée | Arrière-plans, boutons, overlays |
| radial-gradient(circle, …) | Cercles concentriques | Halos, projecteurs, vignettages |
| conic-gradient(from angle, …) | Rotation autour du centre | Camemberts, roues chromatiques, bordures animées |
Conseils pour des dégradés réussis
- Restez dans des teintes voisines (analogues) pour un rendu doux ; les teintes opposées passent par des zones grises ternes.
- Pour un dégradé de texte, combinez background-clip: text et color: transparent.
- Sur de grandes surfaces, ajoutez un léger bruit (noise) pour éviter les bandes visibles (banding).
- Pensez au contraste : un texte posé sur un dégradé doit rester lisible sur toute la plage de couleurs.
Le code généré utilise des couleurs hexadécimales pour une compatibilité maximale. Vous pouvez les remplacer par des variables CSS (var(--ma-couleur)) dans votre projet.
Questions fréquentes
Quelle est la différence entre linear, radial et conic ?
linear-gradient progresse en ligne droite selon un angle ; radial-gradient rayonne depuis le centre vers l’extérieur ; conic-gradient tourne autour du centre comme une roue chromatique. Les trois acceptent les mêmes listes de couleurs.
Combien de couleurs puis-je utiliser ?
L’outil gère jusqu’à 6 stops, ce qui couvre la quasi-totalité des besoins. En CSS pur, le nombre est illimité, mais au-delà de 4 ou 5 couleurs un dégradé devient vite difficile à maîtriser.
Que signifient les pourcentages à côté des couleurs ?
C’est la position du stop le long de l’axe du dégradé : 0 % au début, 100 % à la fin. Deux stops rapprochés créent une transition nette, deux stops éloignés un fondu progressif.
Le code généré fonctionne-t-il sur tous les navigateurs ?
linear-gradient et radial-gradient sont pris en charge partout depuis des années. conic-gradient est disponible dans tous les navigateurs modernes (Chrome 69+, Firefox 83+, Safari 12.1+).
Comment animer un dégradé CSS ?
Les dégradés ne s’animent pas directement, mais deux techniques fonctionnent bien : animer background-position sur un dégradé surdimensionné (background-size: 200 %), ou animer les couleurs via des propriétés personnalisées enregistrées avec @property.