Huely/CSS gradient generator
Linear, radial and conic gradients with as many stops as you want — and a choice of interpolation space, which is the setting that decides whether the middle of your gradient is a color or a smear of grey.
Put a saturated blue next to a saturated orange in a default CSS gradient and the centre comes out a muddy grey-brown. This is not a browser bug. A default gradient interpolates each of the red, green and blue channels independently along a straight line, and the straight line between two opposite hues in RGB space passes directly through the achromatic axis — through grey. The colors have to lose their saturation to get to each other.
Interpolating in OKLCH changes the path, not the endpoints. Hue is an angle, so the ramp travels around the hue circle and keeps its chroma the whole way. The two ends are identical; only the middle differs, and the middle is the part you were fighting.
The workaround designers reach for — adding a third stop in the middle to "fix" the grey — is a manual approximation of this. Switching the interpolation space does it properly, for every gradient, without extra stops to keep in sync.
Native OKLCH gradient interpolation — linear-gradient(90deg in oklch,
…) — is supported in current browsers but not in older ones, which
ignore the whole declaration as invalid. Falling back to nothing would leave
a transparent box.
So the generator emits two declarations. The first is the same gradient expressed as sampled stops, which every browser understands. The second is the native version; browsers that support it apply it and override the first, browsers that do not simply skip it. Both render the same picture, so nobody sees a degraded version — the fallback is just more verbose.
Because the default interpolation is per-channel in sRGB, and the straight line between two opposite hues passes through grey. Interpolating in OKLCH travels around the hue circle instead and keeps the midpoint saturated. Switch the interpolation setting above to see the difference on your own colors.
in oklch safe to ship?Yes, if you keep a fallback — which is what the CSS copied here does. A browser without support ignores that declaration entirely, so the sampled declaration above it renders instead, and the result is visually the same.
Add stops and drag their positions. Each pair of neighbouring stops is interpolated independently, so you can mix a tight transition and a long one in the same gradient.
Only if the contrast holds across the whole gradient. Check your text color against the lightest stop, not the average — that is where it will fail. Paste that stop into the contrast checker.
Linear runs along an angle, radial spreads outward from a point, and conic sweeps around one — which is why conic is what pie charts and color wheels are made of. All three take the same stop list.