🌈 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.

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].

संपूर्ण गाइड: CSS Gradient Generator