CSS Gradient Generator

Because it is being interpolated in sRGB, which averages the red, green and blue channels. Halfway between blue and yellow those averages land almost exactly on grey: measured, the midpoint carries 0.000 chroma where both ends carry 0.211. The colour was never chosen, it simply fell out of the arithmetic. Adding “in oklch” to the gradient interpolates through a perceptual space instead, and the same midpoint keeps 0.124 chroma.

It tells the browser which colour space to interpolate through. Without it the default is sRGB, which averages channels; with it the browser walks lightness, chroma and hue separately, so a gradient crossing the colour wheel stays saturated the whole way. It is part of CSS Color 4 and works in every current browser. It makes little difference between two shades of one hue, which is why it is worth reaching for specifically when a gradient crosses the wheel.

Which way round the colour wheel the gradient travels. Red to blue the short way passes through magenta; the long way goes through green, yellow and orange instead. Shorter is the default and is almost always what you want, but longer is how a rainbow sweep across two nearby hues is made. There are also increasing and decreasing, which force a direction regardless of which is shorter.

Only if you support browsers older than the current generation. If you do, put a plain gradient first and the OKLCH version second: a browser that does not understand the newer syntax ignores that declaration and keeps the earlier one. The fallback offered here is not simply the same gradient without the hint — it carries extra stops sampled along the OKLCH path, so the shape survives even where the syntax does not.

One that sweeps around a centre point rather than along a line, which is how pie charts, colour wheels and loading spinners are made in pure CSS. The angle sets where the sweep starts. It is the least used of the three and the one that most often removes the need for an image.

Usually two or three. Every additional stop is a place the eye can catch a seam, and gradients that look muddy are often over-specified rather than under-specified. If you are adding stops to stop a gradient going grey in the middle, switch the interpolation to OKLCH instead — that is the actual problem, and the extra stops are a workaround for it.