You wrote red and blue. The middle came back muddy.
You did not pick the midpoint. The interpolation did.
Most people still think a gradient is a shape. Linear, radial, conic. Pick one, drag two stops, ship. The shape is configuration. The more interesting decision is the space those colors travel through.
Modern CSS uses Oklab as the default interpolation space for color interpolation. That is already a better baseline than the old mental model of "the browser just mixes RGB." But when the gradient matters, I still prefer to choose the space explicitly.
in srgb can produce darker, grayer midpoints because sRGB is not perceptually uniform.
in oklab blends on perceptual Cartesian axes. It is my default when I want the transition to stay even without taking a visible tour around the hue wheel.
in oklch is polar. Hue is an angle, so the browser has to choose a path around the circle. By default it takes the shorter route. That path can introduce hues that were not present at either endpoint. Sometimes that is exactly the effect. Sometimes it is the bug.
The interpolation space is part of the palette.
Stops, hints, edges
A stop is a color at a position.
Two stops at the same position make a hard edge:
blue 50%, red 50%
That is useful for flags, ticks, segmented surfaces, and any place where the edge belongs to the gradient itself.
A color hint is different. red, 40%, blue moves the midpoint of the blend. It does not add a third color.
Radial and conic gradients also have defaults. If the center, extent, or start angle matters, set it. Otherwise you did not design that part. You inherited it.
And if you want a diamond-like blend, layer gradients. CSS does not have a magic diamond-gradient() keyword waiting for the right search query.
Move the layer, not the recipe
If the gradient has to animate, first ask whether the color recipe actually needs to change.
Often it does not.
A conic spinner can be a static gradient on an oversized clipped layer that rotates. A wash can translate. A highlight can move with a transform.
That keeps the color field stable while the layer moves. It is usually easier to reason about than rebuilding a complex gradient definition every frame, and it gives the browser a simpler job.
Same stops, three spaces
Take one pair of colors and render it three times:
in srgb
in oklab
in oklch
Then look at the middle, not the endpoints.
If the sRGB version muddies, that is the space.
If OKLCH visits a third hue, that is the path around the wheel.
The shape was never the whole gradient. The space is part of the decision.