CSS Gradient Generator

Build a gradient visually, add colour stops with position sliders, and copy the CSS when it looks right.

Gradient type

Angle or position

Radial shape and position

Preview

Colour stops

CSS

How it works

Linear, radial and conic gradients are supported, and every colour stop has its own position slider (0–100%).
The preview updates as you type, so you can dial in the look before copying.
The generated CSS is valid for modern browsers, with a background-image rule ready to paste.