Générateur de dégradé CSS

Créez de magnifiques dégradés CSS linéaires et radiaux avec deux ou trois points de couleur. Aperçu en temps réel et copie du CSS instantanée. Sans inscription, entièrement côté client.

Créez un dégradé en quelques secondes. Choisissez deux ou trois couleurs, optez pour linéaire ou radial, réglez l'angle, et copiez le CSS prêt à coller. Tout s'exécute dans votre navigateur — rien n'est téléversé.

L'aperçu en direct se met à jour quand vous changez les couleurs.

À propos des dégradés CSS

Linéaire contre radial

Un dégradé linéaire s'écoule le long d'une ligne droite selon un angle donné. Un dégradé radial rayonne depuis un point central en cercle.

Où les dégradés sont utiles

Ils ajoutent de la profondeur aux boutons, aux sections hero, aux cartes et aux arrière-plans sans ressources image supplémentaires — gardant les pages légères et rapides.

Construit avec chroma.js, une bibliothèque open-source sous licence BSD.

FAQ

Puis-je utiliser plus de trois couleurs ?
Cet outil prend en charge jusqu'à trois points. Pour plus, vous pouvez étendre le CSS généré manuellement avec des valeurs de couleur supplémentaires.
L'angle a-t-il de l'importance pour les dégradés radiaux ?
Non — l'angle ne s'applique qu'aux dégradés linéaires. Les dégradés radiaux s'étalent uniformément depuis le centre.
Mon image ou mes données de couleur sont-elles téléversées ?
Non. Tout le traitement se fait localement dans votre navigateur.