Gradient generator
Build linear, radial and conic CSS gradients with multiple stops and optional OKLCH interpolation. Live preview, copy the code.
background: linear-gradient(90deg, #6b46ff 0%, #00b8d4 100%);About this gradient generator
Design linear, radial and conic CSS gradients visually and copy the
exact background declaration. Add as many color stops as you like, drag the
angle, and see the result update live. The output is plain, dependency-free CSS
you can paste straight into any stylesheet.
OKLCH interpolation
Enable OKLCH interpolation to interpolate colors through the perceptually
uniform OKLCH space instead of sRGB. This avoids the muddy grey “dead zone” you
often get in the middle of an sRGB gradient (for example blue → yellow), giving
noticeably more vivid, even transitions. It compiles to the modern
linear-gradient(in oklch, …) syntax supported by current browsers.
How to use it
- Pick a gradient type and set the angle.
- Add, recolor or reposition the stops.
- Toggle OKLCH interpolation if the midpoint looks dull.
- Copy the generated CSS.
FAQ
What's the difference between the gradient types?
Linear runs along a straight line at the chosen angle, radial spreads out from a center point, and conic sweeps around a center like a color wheel (great for pie charts and loaders).
Why does my gradient look muddy in the middle?
That's the sRGB interpolation dead zone. Enable OKLCH interpolation to blend through a perceptually uniform space for vivid, even transitions.