🌈 CSS Gradient Generator
Create CSS gradient backgrounds visually — linear, radial, and conic. Add multiple color stops, set angle and position. Copy CSS instantly. Free online gradient generator.
Color Stops
How to Use
1
Choose gradient type
Select Linear, Radial, or Conic from the type selector, then set the angle or position.
2
Add color stops
Click each stop to pick a color. Add more stops with the + button or drag to reposition them.
3
Copy the CSS
The live preview updates instantly. Click Copy CSS to get the ready-to-use background declaration.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient creates smooth transitions between two or more colors without using an image. Gradients are defined with background-image (or background shorthand) using linear-gradient(), radial-gradient(), or conic-gradient() functions.
What is the difference between linear, radial, and conic gradients?
Linear gradients transition along a straight line at any angle. Radial gradients spread outward from a center point in a circular or elliptical shape. Conic gradients rotate around a center point like a color wheel or pie chart.
How do I add multiple color stops?
Click "Add Stop" to insert additional color stops between existing ones. Each stop has a color and a position (0–100%). You can drag stops to reposition them or click the × to remove them.
How do I use a gradient in CSS?
Copy the generated CSS and use it as: background: linear-gradient(45deg, #ff6b6b, #4ecdc4); or apply it to background-image. Gradients can also be applied to borders, masks, and text with additional CSS techniques.
What is the Tailwind output for gradients?
Tailwind v3 supports gradients with from-{color}, via-{color}, to-{color} utility classes combined with bg-gradient-to-{direction}. For custom colors outside the palette, use the arbitrary value syntax: from-[#ff6b6b].
Guide : Générateur de Dégradés CSS
Qu'est-ce que c'est ?
Le Générateur de Dégradés crée des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct et un code CSS copier-coller.
Personnalisez les arrêts de couleur, l'angle, la position du centre et le type de dégradé visuellement sans écrire une ligne de CSS.
Comment utiliser
- Choisissez le type de dégradé (linéaire, radial, conique).
- Ajoutez des arrêts de couleur en cliquant sur la barre de dégradé.
- Ajustez l'angle ou la position du centre.
- Copiez le CSS généré.
Conseils professionnels
- Les dégradés coniques sont parfaits pour les graphiques circulaires en CSS pur.
- Utilisez des couleurs avec le même niveau de luminosité pour des transitions douces et naturelles.