CSS Gradient Generator

Build linear, radial and conic gradients with multiple stops.

Type

LinearRadialConic

Angle135°

Colour stops

CSS output

About CSS Gradient Generator

Build linear, radial and conic CSS gradients with any number of colour stops. The preview updates in real time and the CSS output is ready to paste directly into your stylesheet. No dependencies, no uploads — everything runs in the browser.

Can I use the output directly in CSS?

Yes — click "Copy CSS" and paste the two-line output into your stylesheet. Both background and background-image are included for compatibility.

How many colour stops can I add?

You can add as many stops as you like by clicking "Add stop". Each stop has its own colour picker and position slider.

Keywords: CSS gradient generator, linear gradient tool, radial gradient, conic gradient, colour stop builder