CSS Gradient Generator

Build CSS gradients visually with a live preview. Linear, radial, and conic. Drag color stops, pick angles, add multiple stops, choose interpolation color space. Copy the generated CSS ready to paste into your stylesheet.

How to use the CSS Gradient Generator

Add or remove color stops, drag their position slider, pick the gradient type. The preview and CSS update live. The interpolation color space matters: oklch avoids the muddy gray midpoints that sRGB gradients can produce — especially noticeable between complementary colors like blue→yellow.

About CSS gradients

CSS gradients render as images without needing actual image files — pure CSS, GPU-rasterized. Linear, radial, and conic cover nearly every gradient need. The newer in oklch / in oklab interpolation (CSS Color Module Level 4, broadly supported in 2026) produces perceptually-uniform gradients without the desaturated midpoint problem of sRGB.

For a smooth gradient: pick colors closer in lightness; the change in hue and saturation will look natural. For a punchy gradient: pick colors with opposite hues, then use OKLCH interpolation to avoid the dead gray in the middle.

Frequently asked questions

What is the difference between linear, radial and conic gradients?
Linear blends along a straight line, radial blends outward from a center point and conic sweeps around a center like a color wheel. Each suits different effects.

What does the interpolation color space change?
Interpolating in oklch or lab usually gives smoother, more even transitions than the default sRGB, especially between distant hues where sRGB can pass through a muddy middle.

Can I add more than two color stops?
Yes. Add as many stops as you need and position each one; the generated CSS lists them in order.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: