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.