CSS Gradient Generator

Builds linear, radial, and conic CSS gradients from a draggable stop bar, with an angle or center control, an optional repeating flag, and a per gradient interpolation color space. Because background-image can hold several gradients at once, the editor works on a stack of layers, which is how a mesh gradient is put together in plain CSS. A pasted value is read back into editable stops, and the output comes as both a CSS declaration and a Tailwind arbitrary value.

Pick a preset or paste a gradient you already have, then drag the stops along the bar to move them and use the color field and opacity slider to change them. Add a stop by clicking the empty part of the bar, remove one with its delete button, and use the arrow keys once a stop handle has focus to nudge it a percent at a time. Change the type between linear, radial, and conic, set the angle or the center, then copy the CSS or the Tailwind value.

Gradient builders usually stop at two stops, one layer, and the srgb interpolation the browser defaults to, which is exactly what makes a blue to yellow fade go gray in the middle. This one exposes the interpolation color space, keeps a real layer stack so mesh and overlay gradients are possible, and reads an existing value back so you can edit what is already in your stylesheet. It runs entirely in the page, so your files and inputs never leave your device.

Why does my gradient go gray in the middle?

By default a browser interpolates in srgb, and the straight line between two saturated colors in that space passes close to gray. Adding an in oklch or in oklab clause tells the browser to interpolate in a perceptual space instead, which keeps the midpoint saturated. Support landed in Chrome 111, Safari 16.2, and Firefox 128, so a browser that does not understand the clause ignores the whole gradient: keep a plain background-color underneath as the fallback.

How do I make a mesh gradient with CSS?

Stack several radial gradients whose outer stops fade to a fully transparent version of their own color, then put a flat gradient or background color underneath. Fading to transparent rather than to the transparent keyword matters in older browsers, because transparent used to mean transparent black and left a gray halo. The mesh preset here shows the shape, and each blob is an editable layer.

Do I still need vendor prefixes?

No. Unprefixed linear-gradient, radial-gradient, and conic-gradient work in every browser released in the last decade, and the -webkit- and -moz- forms used a different, incompatible angle convention, so keeping them around is worse than dropping them. This tool never emits a prefixed value.