Générateur de dégradé

Dégradés CSS linéaires / radiaux / coniques avec arrêts de couleur, aperçu et code copiable

Créez des dégradés CSS (linéaire, radial, conique) avec des arrêts de couleur et angles personnalisés. L'aperçu en direct se met à jour au fur et à mesure que vous ajustez chaque arrêt ; le CSS généré est prêt à copier dans votre feuille de style.

Linear

Radial

Conic

Angle (degrés)

Arrêts de couleur

Position (%)

Galerie de présets

Aperçu

CSS

background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

Comment utiliser

Choose the gradient type: linear, radial, or conic.
Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
The preview pane updates live as you edit.
Copy the generated CSS background value straight into your stylesheet.

Exemples

Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.