100% Free · Real-Time CSS Output

CSS Gradient Generator

Create ultra-smooth multi-stop linear and radial gradients with interactive sliders and copy clean CSS code.

Angle: 90°

Color Stops (2/6)

#4f46e5

0%

#06b6d4

100%

Curated Presets

CSS Code

background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);

How to Build CSS Gradients

1

Choose Type

Select Linear for directional transitions or Radial for circular, center-outward glow effects.

2

Adjust Stops

Click Add Stop to insert extra color transitions, choose custom hex colors, and drag stop positions from 0% to 100%.

3

Copy Code

Click Copy CSS Code to get cross-browser compliant background gradient declarations.

Frequently Asked Questions

Can I use these gradients in Tailwind CSS?

Yes! You can paste the generated `linear-gradient(...)` function into `tailwind.config.js` or directly inside arbitrary values like `bg-[linear-gradient(90deg,#4f46e5,#06b6d4)]`.

How many color stops can I add?

You can add up to 6 custom color stops with precise percentage positioning.