Générateur de dégradé
Tout se passe dans votre navigateur. Vos fichiers et vos données ne quittent jamais votre appareil.
À propos de cet outil
Un générateur de dégradé permet de construire un dégradé CSS à l’œil, sans deviner les angles ni les positions des arrêts. Choisissez linéaire, radial ou conique, ajoutez ou retirez des arrêts de couleur, et ajustez la couleur et la position de chacun pendant qu’une grande boîte d’aperçu se met à jour instantanément.
Quelle est la différence entre les trois types de dégradé ?
Un dégradé linéaire mélange les couleurs le long d’une ligne droite, dont vous fixez la direction avec un curseur d’angle : 90 degrés va de gauche à droite, 180 de haut en bas. Un dégradé radial se propage depuis un point central, et vous choisissez entre un cercle (diffusion égale dans toutes les directions) ou une ellipse (étirée pour épouser la forme de la boîte). Un dégradé conique fait tourner les couleurs autour d’un point central, comme une roue chromatique ou un camembert, et prend lui aussi un angle qui fixe le point de départ du balayage. Chaque type accepte un nombre quelconque d’arrêts de couleur, et chaque arrêt a une couleur et une position de 0 à 100 %, ce qui permet de rapprocher plusieurs couleurs ou de les répartir uniformément.
Puis-je partir d’un rendu existant plutôt que de tout construire moi-même ?
Oui. L’outil propose une petite sélection de préréglages, comme un dégradé linéaire « Sunset » à deux couleurs chaudes, un mélange radial « Deep Space », ou un dégradé conique « Rainbow Wheel » complet ; en choisir un le charge dans l’éditeur, d’où vous pouvez ajuster les couleurs, les arrêts ou l’angle au lieu de repartir de zéro. Quel que soit le résultat, la ligne affichée est le CSS exact que vous écririez à la main, comme linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), prête à coller dans une feuille de style.
Ce que je conçois est-il envoyé quelque part ?
Non. La construction et l’aperçu du dégradé se font entièrement dans votre navigateur, donc rien de ce que vous concevez ne quitte votre machine. Cela permet de prototyper sans risque le dégradé de marque d’un client ou le fond d’un produit interne avant sa mise en ligne.
Utilisez-le pour obtenir la ligne background: linear-gradient(...) d’une section hero, une lueur radiale derrière une carte, ou un dégradé conique pour un anneau de progression ou une roue chromatique. Consultez la référence gradient de MDN pour la syntaxe complète de linear-gradient(), radial-gradient() et conic-gradient().