CSS Gradient Generator

Here for one reason: a CSS gradient you can paste straight into your stylesheet. The editor lets you build linear, radial and conic gradients visually and copies clean CSS the moment it looks right.

How to use it

1. Pick a gradient type — linear, radial or conic.
2. Add colour stops and drag them along the bar to set where each colour sits.
3. Click a stop to change its colour and opacity.
4. Set the angle or direction to aim the gradient.
5. Copy the generated CSS with one click.

Good to know

• A subtle two-stop gradient often reads as "premium" where a flat colour feels plain.
• Conic gradients are handy for pie-chart-style rings and colour wheels.