Gradient Generator
Build CSS gradients in OKLab, OKLCH or sRGB, with a fallback.
Drag the corner to resize the preview (640 × 240 px). A checkerboard shows through transparent colours.
Stops
Tab to a stop; Arrow keys move it by 1% (Shift: 10%); Delete removes it. Click the bar to add a stop there.
Stop 1 colour
Any CSS colour, including oklch() and color(display-p3 …).
| Stop | Position (%) | Hold until (%) (optional; makes a hard edge) | Midpoint to next (%) (optional) | Actions |
|---|---|---|---|---|
| – |
Shape and interpolation
The hue method applies to polar spaces only: oklch, lch, hsl and hwb.
CSS
Three declarations: a solid colour, then the gradient in plain syntax with extra stops so it looks the same everywhere, then the exact gradient for browsers that support in oklab.
Edit an existing gradient
Export an image
Images are drawn on this device; nothing is uploaded.
Sample text
Think a result is wrong? Report it on GitHub
Why do gradients look grey in the middle?
Create linear, radial and conic CSS gradients with smooth OKLab or OKLCH colour blending and a fallback for older browsers. Copy the CSS or export SVG and PNG.
A gradient blends from one colour stop to the next. How the blend looks depends on the colour space it is worked out in. Blending red into blue in sRGB, the space hex colours live in, passes through a dull purple, and yellow into blue goes through flat grey. OKLab, the default here, blends in a space designed to match how people see colour, so the middle stays bright. Polar spaces such as OKLCH blend around the colour wheel instead, and the hue method chooses the shorter or longer way round.
Why the CSS has three lines
Browsers released since 2023 understand linear-gradient(in oklab, …). Older ones would ignore it, so the output first gives a solid colour, then the same gradient in plain syntax with extra sRGB stops added until it matches the real one to within a just-noticeable difference, then the exact version. Each browser uses the last line it understands.
Pasting and exporting
Paste any gradient or background declaration to edit it. Gradients that refer to images or variables are refused, and the preview only ever shows this tool's own CSS. SVG and PNG exports are drawn on your device with the same colour maths, so they match the preview; nothing is uploaded. Copy link puts the gradient after the # in the address, which browsers never send to a server.