UTILS.
100% in-browser

CSS Gradient Generator

Build a linear or radial gradient with live preview and copy the CSS.

About this tool

Create a two-colour linear or radial gradient by choosing colours, positions and an angle, then copy the background rule. The live preview runs entirely in your browser.

Frequently asked questions

What is the angle in a linear gradient?
The angle sets the direction of the colour transition: 0° points up, 90° points to the right, 180° down, and so on.
When should I use radial instead of linear?
Use radial to radiate colours outward from a centre point (like a spotlight); linear blends them along a straight line.

More tools