Generator

Create gradients and copy the CSS

Pick multiple colors, adjust direction and type, preview live, then copy production-ready CSS.

Everything updates instantly in your browser.

How to make a CSS gradient

1

Pick type

Use linear or radial gradients.

2

Add colors

Adjust each color and stop position.

3

Copy CSS

Paste the ready declaration into your stylesheet.

Questions

Is anything uploaded?

No. The generator is pure browser JavaScript.

Can I use more than two colors?

Yes. Add as many stops as you need.

Does it store my gradients?

No. There is no backend, account or data storage.