Générateur de dégradé CSS

Créez des dégradés linéaires, radiaux et coniques avec un aperçu en direct et du CSS prêt à copier. Ajustez les arrêts, les angles et les formes, puis collez-les dans votre feuille de style.

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

Créez des dégradés linéaires, radiaux et coniques avec un aperçu en direct et du CSS prêt à copier.
S'exécute dans votre navigateur
Utilisation gratuite

Mode d'emploi

Choisissez le type de dégradé, l'angle ou la position.
Ajoutez ou modifiez des arrêts de couleur.
Copiez le CSS généré.

How this tool works

Choisissez le type de dégradé, l'angle ou la position.
Ajoutez ou modifiez des arrêts de couleur.
Copiez le CSS généré.

Recommended settings

Utilisez d'abord les options par défaut, puis ajustez si nécessaire

Supported formats

Text / on-page input

File size and limits

Les aperçus multicouches très complexes peuvent sembler plus lents sur les téléphones plus anciens.

Privacy

Les générateurs de couleurs et CSS fonctionnent entièrement dans votre navigateur. Les aperçus et les conversions ne téléchargent jamais vos styles.

Common use cases

Utilisez le générateur de dégradés CSS chaque fois que vous en avez besoin : créez des dégradés linéaires, radiaux et coniques avec un aperçu en direct et du CSS prêt à copier.

Troubleshooting

L'aperçu est différent après le collage

Vérifiez les CSS concurrents sur votre page (réinitialisations, couleurs héritées). Copiez d'abord la règle générée dans une feuille de style isolée.

FAQ

Est-ce que cela télécharge mon CSS ?

Non. Les générateurs et les convertisseurs s'exécutent dans votre navigateur avec un aperçu en direct.

Ai-je besoin d'un compte ?

Non. Ouvrez l'outil, modifiez les contrôles et copiez le CSS.