Home • Tools • CSS Gradient Generator

Free CSS Gradient Generator

Create linear and radial CSS gradients with multiple colour stops and copy the CSS code.

How to use this tool

Pick colours, angle and type. The preview updates live and the CSS is ready to copy.

Does the CSS work in all browsers?

Yes, standard linear-gradient and radial-gradient work in all modern browsers.

Can I add more colours?

Yes. Add up to five colour stops.