CSS Gradient Generator
Build linear, radial and conic gradients with unlimited color stops.
Colour stops
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
About CSS Gradient Generator
CSS gradients render as images without a single network request, scale to any size without artefacts and animate smoothly - which is why they replaced background images for most decorative work.
This generator supports linear, radial and conic gradients with unlimited draggable colour stops, angle control, and live CSS output you can paste straight into a stylesheet.
How CSS Gradient Generator works in your browser
The generator assembles a linear-gradient, radial-gradient or conic-gradient value from your colour stops, their positions and the angle or shape you choose, and renders it on a live preview. The CSS it outputs is exactly what the preview uses.
Gradients blend in sRGB, which can pass through dull greys between complementary colours. Adding an intermediate stop in a more saturated hue is the usual fix.
When to use it
- Building a hero background without shipping an image file.
- Creating a colour wheel or progress ring with a conic gradient.
- Fixing a muddy midpoint by adding and positioning an extra stop.
Frequently asked questions
Why does my gradient look muddy in the middle?
Blending through sRGB can pass near grey. Adding an intermediate stop in a more saturated hue fixes it.
Can I use more than two colors?
Yes, add as many stops as you like and drag each one to position it along the gradient line.
What is a conic gradient for?
It sweeps colour around a centre point, which makes it the natural choice for pie charts, colour wheels and progress rings.