Créer des dégradés CSS pour le web
Ce que fait ce générateur
Un dégradé CSS fond deux couleurs ou plus sur une forme, et ce générateur transforme ce fondu en CSS prêt à coller, sans que vous ayez à écrire la syntaxe à la main. Vous choisissez le type de dégradé, ajoutez des arrêts de couleur, et l'outil assemble la règle background correspondante — une fonction linear-gradient() ou radial-gradient() — pendant qu'un aperçu en direct reflète chaque modification à l'instant où vous la faites.
Chaque arrêt de couleur possède sa propre teinte, sa position sur le tracé en pourcentage et son opacité : vous décidez donc précisément où une couleur cède la place à la suivante. Les préréglages vous offrent une palette déjà composée à ajuster plutôt qu'une page blanche.
Quand l'utiliser
Pensez-y dès qu'un aplat paraît trop plat : arrière-plans de mise en avant, boutons, cartes, badges et calques de teinte gagnent tous à une transition de couleur discrète. Les designers s'en servent pour prototyper un rendu en quelques secondes ; les développeurs pour récupérer la bonne syntaxe sans mémoriser les mots-clés d'angle ni les règles de pourcentage.
Il est aussi précieux pour reconstruire un dégradé existant : recréez-le arrêt par arrêt, ajustez l'angle et collez le résultat directement dans une feuille de style ou un styled-component.
Exemple : un dégradé linéaire
Imaginons un fondu diagonal du bleu vers le violet. Réglez le type sur linéaire, placez un premier arrêt à 0% et un second à 100%, puis fixez l'angle à 135deg. Le résultat devient background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);. Passez en radial et ces deux mêmes arrêts s'affichent en radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%), se propageant du centre vers l'extérieur au lieu de suivre une ligne.
Types de dégradés, arrêts et cas particuliers
Les dégradés linéaires suivent une ligne droite dont vous réglez l'angle ou la direction ; les dégradés radiaux se propagent depuis un point central avec une forme (circle ou ellipse), une taille comme farthest-corner et une position X/Y ajustable. Ajouter plus de deux arrêts crée des bandes multicolores, et placer deux arrêts à la même position produit une rupture de couleur nette au lieu d'un fondu progressif. Une opacité inférieure à 100% laisse le dégradé reposer sur une photo ou un autre calque. Une fois le rendu satisfaisant, copiez le CSS ou téléchargez-le pour l'intégrer à votre projet.