Developer

CSS GRADIENT GENERATOR

Create, preview, and export CSS linear, radial, and conic gradients. Add and drag color stops, then copy CSS or Tailwind code with one click.

Private by design No signup · Free

History

Gradient Type

Angle

90°

Color Stops

Presets

Library

Live Preview

Output

Color Info

Stops

Linear

Type

90°

Angle

Frequently Asked Questions

Comment le créer ?

Ajoutez des arrêts, glissez-les : le CSS sort seul.

Code Tailwind ?

Oui. Exporte en un clic.

C'est quoi conique ?

Dégradé angulaire tournant, pour charts et effets.

Gratuit ?

Oui.

How to Use

Choisissez le type

Linéaire, radial ou conique.

Mettez les couleurs

Ajoutez, glissez les arrêts.

Copiez le code

CSS ou Tailwind.

How to Calculate

Les arrêts forment le string du dégradé.

À propos de cet outil

Outil visuel pour de beaux fonds de sites. Avec arrêts d'opacité, presets et aperçu live. Code propre prêt à copier. Gratuit.

Related Tools

Générateur Texte Dégradé

Générateur Palettes

Vérificateur Contraste

Générateur d'Ombres CSS

Générateur Filtres CSS

Générateur d'Animations CSS

Methodology & feedback

Figures run locally in your browser from the values you enter (page updated 2026-10-02). Estimates are educational only — verify finance, tax and health decisions with a qualified professional (see Disclaimer). Spotted an error? Report it via contact and we correct with a new update date.

Was this tool helpful?