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 color stops and drag them along the bar to set where each color sits.
3. Click a stop to change its color 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 color feels plain.
• Conic gradients are handy for pie-chart-style rings and color wheels.