Skip to content

Gradient Generator FREE

Build a linear, radial or conic gradient from your own stops and copy the CSS. Interpolate in OKLCH to avoid the grey band that sRGB puts in the middle.

Free to use No registration Privacy-first

HEX, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 ...) or a CSS colour name.

Recent

Gradients

Every conversion, palette and contrast figure on this page is computed in your browser. An image you drop in is read on a canvas in this tab and is never uploaded.

How it works

About the CSS this produces

Linear, radial and conic gradients, with as many stops as you need, dragged into place and copied as CSS. The angle, the shape and the position are part of the output, so what you paste is what you saw on the page.

Interpolating in OKLCH is offered because sRGB interpolation puts a dull band through the middle of many gradients - blue to yellow is the classic case. The plain sRGB form is included as well, so a browser that does not understand the newer syntax still draws a gradient.

Build a better web, faster.

We build custom software and solutions tailored to your needs.

Get in touch