Developer Tools

CSS Gradient Generator

🔒 Fonctionne dans votre navigateur

Create linear, radial, and conic CSS gradients with a live preview. Copy the CSS instantly. Free, runs in your browser.

Comment utiliser cet outil

  1. Choisissez le type de dégradé, la direction et les points de couleur.
  2. Prévisualisez le dégradé en direct et ajustez jusqu'à satisfaction.
  3. Copiez le code CSS généré dans votre feuille de styles.
Color stops
0%
100%
CSS
background: linear-gradient(135deg, #f97316 0%, #8b5cf6 100%);

Questions fréquentes

Le générateur de dégradés envoie-t-il mes données à un serveur ?
Non. Tout le rendu du dégradé et la génération du code CSS s'effectuent entièrement dans votre navigateur. Rien n'est transmis nulle part.
Quels types de dégradés puis-je créer ?
Vous pouvez créer des dégradés linéaires CSS (transitions de couleurs directionnelles) et des dégradés radiaux (circulaires ou elliptiques). Les deux prennent en charge plusieurs points de couleur.
Puis-je utiliser la sortie directement dans mon CSS ?
Oui. L'outil produit du code CSS prêt à l'emploi que vous pouvez copier et coller directement dans votre feuille de style.
Prend-il en charge plusieurs points de couleur ?
Oui. Vous pouvez ajouter autant de points de couleur que nécessaire et ajuster leurs positions le long de l'axe du dégradé.
guide

How to Create a CSS Gradient (Linear, Radial, Conic)

Build CSS gradients with a live preview tool — no coding required. Copy the CSS and paste directly into your stylesheet.

Plus d'outils gratuitsVoir les 492 →
Merge PDFsCompress ImageJSON FormatterPassword GeneratorVAT CalculatorQR Code Generator
CSS Gradient Generator | brevio