Build linear, radial, and conic gradients with up to eight stops, interpolated in OKLCH or sRGB so you can see exactly what the grey dead zone in the middle of an sRGB blend looks like — and remove it. The output is the CSS declaration, with the sRGB fallback alongside it.
Step by step
01Choose the type
Linear runs along an angle, radial spreads from a point you can move, conic sweeps around one. The type decides which controls matter — an angle for linear, a centre for the other two.
02Place the stops
Drag to reposition, click to add, up to eight. Where a stop sits matters as much as its colour: two stops close together make a hard edge, two far apart make a long transition.
03Pick the interpolation space
OKLCH blends through perceptual colour space and stays vivid across the middle. sRGB is what browsers did by default for twenty years — and what the classic muddy blue-to-yellow gradient is made of.
04Copy the CSS
The declaration comes with an sRGB fallback for older engines, so the gradient degrades to a reasonable approximation rather than to nothing.
Worked example
Blue to yellow is the standard demonstration because the two colours sit on opposite sides of the colour wheel. The route between them is what the interpolation space decides.
Given
The same two stops, two routes
sRGB blue -> grey -> yellow
the path cuts through the middle of the
cube, where the channels cancel out
the centre desaturates to mud
OKLCH blue -> purple/pink -> yellow
the path travels around the hue circle
chroma is held, so nothing goes greyInterpolating in sRGB averages the red, green, and blue channels independently, and for opposing hues that average lands near the middle of the cube — which is grey. Perceptual spaces travel around the hue circle instead, so the midpoint stays a colour. The hue path setting is what decides which way around: shorter takes the direct route, longer deliberately goes the other way for a rainbow sweep.
Before you ship the gradient
The muddy middle is a colour-space artefact
Everyone has made a gradient that sags into grey halfway across and assumed the colours were wrong. They usually are not — the interpolation is. Switching to OKLCH fixes it without changing either stop, which is often the difference between a gradient that looks designed and one that looks like a mistake.
Banding comes from too few steps, not too few stops
Wide, low-contrast gradients show visible bands because 8-bit colour cannot express enough intermediate values across that distance. Adding a middle stop rarely helps; a slight noise or grain overlay does, which is what most polished designs do.
Stop positions matter more than stop count
Eight stops evenly spaced usually looks worse than three placed deliberately. A pair sitting close together creates a crisp transition; a long gap creates a slow one. Design the rhythm before you add more colours.
Conic is for wheels and pies, not backgrounds
It sweeps hue around a centre, which makes it the right tool for colour pickers, progress rings, and pie charts drawn in pure CSS — and a strange choice for a page background, where the seam where it wraps is always visible.
Text over a gradient has no single contrast ratio
The ratio changes across the frame, so a heading that passes at one end can fail at the other. Check the lightest region rather than the middle, or put a solid scrim behind the text so there is one number to verify.
Everything is generated locally
The preview and the CSS are produced in your browser, and the share link carries the stops and settings — enough for a colleague to open the exact gradient rather than an approximation of it.
The judgement call
Type is about the shape you need; space is about whether the middle survives.
A hero or section background
Linear + OKLCH
Predictable direction, and the perceptual space keeps the midpoint from going grey across a wide area.
A glow, spotlight, or vignette
Radial
Spreads from a point you can place off-centre, which is what makes a light source look like one.
A colour wheel or progress ring
Conic
The only type that sweeps around a centre. Pure CSS pie charts are built from it.
Two colours far apart on the wheel
OKLCH
sRGB routes them through grey. This is exactly the case the perceptual space exists for.
Matching an existing design exactly
sRGB
If the original was authored in sRGB, reproducing it means interpolating the same way — including the mud.
A wide, subtle background gradient
Add grain
Banding is an 8-bit limit, not a stop problem. Noise breaks up the bands; another stop will not.
Reference
FAQ
Pick the type, place your stops, and copy the declaration. Linear takes an angle, radial and conic take a centre point you can move. The output includes an sRGB fallback so older browsers get a reasonable approximation of the same gradient.
Because it is being interpolated in sRGB, which averages the red, green, and blue channels separately. For two colours on opposite sides of the wheel that average lands near the middle of the colour cube, which is grey. Switch to OKLCH and the blend travels around the hue circle instead, keeping the midpoint colourful.
The route between the stops. sRGB moves in a straight line through the RGB cube, which can pass through desaturated territory. OKLCH moves through a perceptual space, holding chroma and travelling around the hue circle, so every intermediate colour stays as vivid as the ends.
Eight-bit colour cannot express enough intermediate values across a wide, low-contrast transition, so the steps become visible. Adding stops rarely helps. A subtle noise or grain overlay does, which is why polished gradient backgrounds almost always have one.
When the thing you are drawing goes around a centre — a colour wheel, a progress ring, a pie chart in pure CSS. As a page background it is usually the wrong choice, because the seam where the sweep wraps is hard to hide.
You can, but there is no single contrast ratio to check — it changes across the frame. Test the lightest region the text crosses rather than the average, or place a solid or semi-opaque scrim behind the text so that one measurement covers it.
The preview and the CSS are generated in your browser. Share links carry only the stops and settings.
Keep going
Color Converter
Inspect and adjust each stop in OKLCH before placing it.
Palette Generator
Build stops from a token scale so the gradient matches the system.
Contrast Checker
Check the text you are putting over the gradient's lightest region.
Palette from Image
Take gradient stops from a photograph's dominant colours.