How many color stops can I add?

Up to 6 color stops. Most gradients look best with 2-3 stops.

Why does the Tailwind output show arbitrary values?

Tailwind v3 doesn't have built-in color stops for arbitrary hex values — it uses the [value] syntax. In Tailwind v4, you can define your own gradient colors in the config.

Can I use transparent in gradients?

Not directly in this tool, but you can set opacity to 0 using rgba. Set the stop color and reduce opacity.

CSS Gradient Generator

Runs in browser

Generate CSS linear, radial and conic gradients visually with live preview.

Generate CSS linear, radial, and conic gradients visually with a live preview. Add color stops, adjust angle and position. Copy ready-to-use CSS and Tailwind code instantly.

Angle135°

Color Stops

#6366f10%

#8b5cf6100%

Preset gradients ▾

CSS

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

Tailwind (approx.)

bg-gradient-to-br from-[#6366f1] to-[#8b5cf6]

🔒 Runs in your browser · No uploads · Your data never leaves your device

How to use

Choose gradient type
Select Linear, Radial, or Conic from the tabs. Each type has specific controls like angle, shape, or rotation.
Adjust color stops
Change colors using the color pickers. Drag the position slider to set each stop's position. Add or remove stops as needed.
Copy CSS or Tailwind
The CSS output updates live. Copy the full background CSS property or the Tailwind approximation.

Common use cases

Creating hero section backgrounds — Build a linear gradient background for a hero section and copy the CSS to paste directly into your stylesheet.
Generating Tailwind gradient classes — Get the Tailwind utility class equivalent of your gradient for use in JSX or HTML.

Examples

Purple to indigo

135° linear gradient.

Output

background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

Frequently asked questions

How many color stops can I add?: Up to 6 color stops. Most gradients look best with 2-3 stops.
Why does the Tailwind output show arbitrary values?: Tailwind v3 doesn't have built-in color stops for arbitrary hex values — it uses the [value] syntax. In Tailwind v4, you can define your own gradient colors in the config.
Can I use transparent in gradients?: Not directly in this tool, but you can set opacity to 0 using rgba. Set the stop color and reduce opacity.

Key concepts

Color stop: A color at a specific position in a gradient — gradients smoothly transition between all defined color stops.
Conic gradient: A CSS gradient that rotates colors around a center point, creating pie-chart or color wheel effects.

You might find these useful too.