Outil

Générateur de dégradé

Créez des dégradés CSS linéaires, radiaux et coniques avec plusieurs points de couleur. Copiez le code en un clic.

Type de dégradé
135°
Points de couleur
Presets
Depuis les palettes
Coucher de soleil
Océan profond
Forêt automne
Nord minimaliste
Pop Matisse
Matcha & Poudré
background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F97316 100%);

Le dégradé CSS, outil essentiel du design moderne

Dégradé linéaire

Le dégradé linéaire (`linear-gradient`) est le plus utilisé en CSS. Il crée une transition régulière entre deux couleurs ou plus selon un axe directionnel. Ajustez l'angle entre 0° (vertical) et 360° pour orienter le flux coloré. Idéal pour les fonds, boutons CTA, bannières et en-têtes. Combinez 3 couleurs ou plus pour des effets multicouches sophistiqués. Le code généré est directement compatible avec tous les navigateurs modernes sans préfixe.

Dégradé radial & conique

Le dégradé radial (`radial-gradient`) rayonne depuis un point central, parfait pour les effets de lumière et les cercles colorés. Le dégradé conique (`conic-gradient`) tourne autour d'un centre selon un angle — idéal pour créer des graphiques en camembert, roues chromatiques ou effets d'aurora. Ces deux types supportent plusieurs color stops pour des transitions complexes. Exportez le code CSS en un clic et collez-le directement dans votre stylesheet ou framework.

Comment utiliser le générateur

1
Choisir le type
Linéaire pour les bandes de couleur, radial pour les cercles, conique pour les effets angulaires.
2
Ajuster les stops
Chaque point de couleur a une position (0–100%). Faites glisser le slider ou cliquez le carré pour changer la couleur.
3
Utiliser un preset
Les presets sont des combinaisons prêtes à l'emploi. Cliquez pour les charger instantanément.
4
Copier le CSS
Le code CSS est généré en temps réel. Cliquez "Copier le CSS" et collez-le dans votre projet.