▦CSS Gradient Generator

If your gradient has a dull band through the middle, the two colours are too far apart on the wheel.

Interpolation runs a straight line through the colour space between your two stops. When those stops sit opposite each other — blue into orange, purple into yellow — that line passes close to grey, and the midpoint comes out muddy brown. It is not a rendering fault; it is arithmetic.

The fix is to keep the stops closer in hue, or pick two that share some warmth or coolness. Subtle gradients between neighbouring hues look more considered than dramatic ones between opposites, almost without exception.

Angles

Measured clockwise from a gradient pointing upward, so 90deg runs left to right and 180deg runs top to bottom. This catches people out because it is the opposite of what most drawing tools do.

Fading to transparent

Use the same colour twice with alpha, from full opacity to zero. Fading to white looks identical on a white page and produces a grey haze the moment the section sits on anything coloured — which is exactly when someone notices, usually after launch.

Banding

On a wide area with two close colours, the display cannot render enough intermediate steps and you get visible stripes. A very subtle noise overlay hides it, or widen the colour difference slightly.

Cost

CSS gradients are painted by the browser, so they cost no bandwidth and scale to any size without blurring. They animate badly though — transitioning a gradient forces a repaint every frame. Stack two gradients and animate opacity between them instead.

Text on a gradient needs checking against both the lightest and the darkest point it crosses, not the average.