CSS Gradient Generator
Build linear and radial CSS gradients with a live preview and copy the code. Runs entirely in your browser.
CSS
How it works
1
Choose the type
Pick a linear or radial gradient.
2
Set the colors
Edit each color stop and its position, and add or remove stops.
3
Adjust the angle
For linear gradients, drag the angle to point the gradient any direction.
4
Copy the CSS
Copy the generated background property straight into your stylesheet.
Frequently Asked Questions
Yes — add as many color stops as you like and position each one.
Yes, switch the type to radial; the angle control applies to linear gradients.
No — the gradient is generated in your browser and never sent anywhere.
Create CSS gradients online for free with a live preview. Build linear or radial gradients, add as many color stops as you need, position each stop, and set the angle for linear gradients — then copy the ready-to-use background CSS. It is ideal for buttons, hero sections and backgrounds, and everything runs in your browser, so it is instant and private.