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.
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.