CSS gradients interpolate between endpoint colors in a color space — by default, sRGB. Linear interpolation in sRGB produces the notorious 'gray band' artifact: when transitioning between two complementary or near-complementary hues (e.g., orange to blue), the midpoint falls near a desaturated gray, because the interpolated values in sRGB lose saturation in the middle. The fix: use CSS color interpolation in a perceptual color space. Modern CSS supports `color-interpolation-method` for gradients — specifying `in oklch` or `in hsl` produces smoother, more saturated midpoints. OKLCH-space gradients are especially good for hue-arc transitions because OKLCH maintains consistent lightness and chroma throughout, preventing the gray-middle artifact.
Two types of gradients serve different design functions. Tonal gradients transition between two values of the same or similar hue — lighter to darker, more saturated to less. They add depth, shadow, and dimension without introducing hue contrast. Hue-arc gradients travel across the hue wheel between two different hues. They are more expressive and have higher visual energy but are harder to control: too wide an arc produces rainbow-like results; too narrow an arc looks like a tonal gradient. The sweet spot for hue-arc gradients is a 30–90 degree arc on the hue wheel with consistent chroma/saturation throughout, producing a gradient that clearly reads as a two-color transition rather than a rainbow or a tonal shift.
Gradient direction is a compositional decision, not just an aesthetic one. Horizontal gradients (left to right) interact with the natural reading direction in left-to-right languages — a gradient that goes from warm (attention-getting) at left to cool (receding) at right creates a subtle forward momentum. Vertical gradients interact with depth conventions: darker at bottom (shadow/ground) feels natural and stable; darker at top (in certain UI contexts) can feel like a sky gradient. Radial gradients create emphasis by placing the lightest or most saturated point at the center of attention. Diagonal gradients are the most energetic direction and work best for backgrounds and full-bleed hero elements rather than bounded UI components.
