Retour aux outils

Générateur de dégradés CSS multi-étapes

Créez un dégradé CSS avec plusieurs couleurs (stops), en linear-gradient ou radial-gradient. Copiez le CSS, randomisez, exportez en PNG. Outil 100 % local.

CSS · Design 100 % local · aucune donnée envoyée

Créer un dégradé CSS multi-couleurs (multi-étapes)

Les dégradés CSS modernes permettent d’aller bien plus loin que deux couleurs : avec des color stops (positions en pourcentage), vous contrôlez précisément la transition entre plusieurs teintes. C’est utile pour des arrière-plans, des boutons, des illustrations web, ou des visuels de landing pages.

Ce générateur crée des linear-gradient et radial-gradient multi-étapes, avec choix de l’angle, du centre, des positions et des couleurs. Vous pouvez copier le CSS final ou exporter un PNG prêt à l’emploi. Tout est traité 100 % en local dans le navigateur.

Questions fréquentes (FAQ)

Comment faire un dégradé à 3, 4 ou 5 couleurs ?

Ajoutez des étapes (“stops”) et définissez une position pour chaque couleur (ex : 0 %, 40 %, 70 %, 100 %). Vous pouvez aussi répartir automatiquement.

Pourquoi certaines transitions semblent “brutales” ?

Si deux stops sont très proches (ex : 49 % et 50 %), la transition devient quasi instantanée. Écartez les positions pour lisser.

L’export PNG sera-t-il identique au rendu CSS ?

Il est très proche. L’export reconstruit le gradient via Canvas (approximation pour certains paramètres radiaux). Pour des besoins très stricts, privilégiez le CSS.

Mes couleurs sont-elles envoyées sur un serveur ?

Non, tout est traité localement dans votre navigateur.