Gradients without the grey middle
Interpolated in OKLab, with an sRGB fallback underneath — and the same stops shown both ways so you can see the difference.
Gradients without the grey middle
Interpolated in OKLab, with a plain sRGB declaration underneath for browsers that do not understand the hint. Compare the two on the same stops.
The same stops, both ways
Two stops at the same position make a hard edge
A gradient does not have to look like a gradient. Put two colour stops at the same percentage and the transition between them has zero width, producing a clean line — which turns the same syntax into a tool for stripes, split backgrounds, progress tracks and rules that would otherwise need an extra element.
It is also how repeating patterns are built: a handful of hard stops in a repeating-linear-gradient gives a stripe or a checker with no image and no extra markup. The one thing to watch is that a truly hard edge can alias on a diagonal, since there is no intermediate colour for the browser to smooth with — offsetting the second stop by a fraction of a per cent restores a single-pixel blend and removes the jaggedness.
Angles do not point where you expect
In CSS a gradient angle names the direction the gradient travels towards, measured clockwise from up. So 0deg runs bottom to top, 90deg runs left to right, and 180deg — the default — runs top to bottom. The keyword forms match: to right is 90deg.
This trips people because most other graphics systems measure from the positive x-axis and many count anticlockwise, so an angle copied from a design tool or from SVG frequently arrives rotated by ninety degrees or mirrored. The corner keywords have a further subtlety worth knowing: to bottom right does not mean 135 degrees, it means whatever angle makes the gradient line perpendicular to the opposite corner — so it adapts to the element's aspect ratio, and the two are identical only on a square.
Why two declarations
The in oklab interpolation hint is not understood everywhere, and a declaration containing it is invalid — not merely ignored — in a browser that does not know it. So a plain sRGB gradient is written first and the hinted one second; anything that understands the hint overrides the first, and anything that does not keeps it.
That is the whole reason this outputs two lines instead of one. Deleting the first line does not simplify the CSS, it removes the fallback.
What the grey middle actually is
A gradient is a straight line between two points in whichever space it is drawn in. In sRGB, the line between a saturated blue and a saturated yellow passes close to the achromatic axis, so the middle is grey.
OKLab is arranged so that a straight line between two colours passes through the colours a person would name in between. Same stops, no grey band.
Conic gradients wrap
A conic gradient meets itself at the start angle. If the first and last stops are different colours there is a hard seam there — usually you want the same colour at both ends.