Tools · CSS · CSS gradient generator

CSS gradient generator

Build a linear, radial, or conic CSS gradient and copy the code.

Drop a file here, or choose one.

Runs fully in your browser. Nothing is uploaded.

How it works

Pick linear, radial, or conic, and set the angle or position.
Add or remove color stops (2 to 8 of them), then use the sliders to set each one's position and opacity.
Copy the generated CSS.

What gradient types are supported?

Linear, radial, and conic, each with as many as 8 color stops.

Can I copy the CSS straight into my stylesheet?

Yes, the Copy button puts the full gradient string on your clipboard, ready to paste.

Does it support OKLCH colors?

Yes, where your browser supports the oklch() CSS function - it's detected automatically and only offered when it will actually render.

Is anything sent to a server?

No. There's no file to upload here at all - the gradient is generated and rendered entirely in your browser.