🌈 Créateur de Dégradés CSS — Construire des Gradients

Create linear, radial, and conic CSS gradients visually. Multi-stop color picker, angle control, live preview. Copy CSS or Tailwind code free.

Design your perfect CSS gradient without writing a single line of code. Add color stops, drag them to reposition, pick linear/radial/conic type, adjust the angle — and copy the ready-to-use CSS or Tailwind classes instantly.

Type

Angle: 135°

Color Stops

How to Use

Choose gradient type

Select Linear, Radial, or Conic from the type selector, then set the angle or position.

Add color stops

Click each stop to pick a color. Add more stops with the + button or drag to reposition them.

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.