Chromatic vs tonal gradients
A tonal gradient moves along a single hue's lightness axis — light blue fading to dark blue. Tonal gradients are safe, predictable, and low-risk; they're also less visually interesting. A chromatic gradient moves across hue space — warm blue shifting through violet toward rose. Chromatic gradients carry more emotional energy and visual tension, but they need careful execution to avoid the muddy intermediate zone where colors mix poorly. Moving through HSL or OKLab color space rather than RGB is essential: an HSL gradient from blue to red produces clean violet intermediates, while an RGB lerp produces a washed-out desaturated muddle.
Mesh gradients: control points and chromatic range
Mesh gradients define color behavior with multiple control points across a 2D surface, producing organic non-linear color fields. They're powerful, but the chromatic range is the key decision: wide-hue-range mesh gradients (cyan through green through yellow through orange) read as decoration or illustration, not as material surface. Narrow-range mesh gradients — warm white shifting through cream into a whisper of rose, or cool gray with a touch of violet in one corner — read as material, like the color variation in polished stone, woven fabric, or backlit glass. For UI use, err toward narrow chromatic range and let lightness variation create the visual interest.
Where gradients belong in a design system
Full-bleed background contexts (hero sections, marketing panels, feature highlights) are the low-risk, high-impact zone for gradients. They fill a large area where the gradient quality is visible and the decorative role is appropriate. Interactive elements (buttons, progress bars, selected states) are riskier — a gradient button reads as premium in one context and as cheap template artifact in another. The test is whether the gradient adds meaning (suggests direction, depth, state change) or is purely cosmetic. Status indicators and data visualizations should almost never use gradients: they introduce ambiguity about where one state ends and another begins, undermining the semantic clarity that makes them functional.
CSS gradient implementation details
The `color-interpolation-method` property in modern CSS allows gradient hue interpolation in OKLab or OKLCH color space, which produces perceptually uniform gradients without the common mid-gradient desaturation artifacts. `background: linear-gradient(in oklch, hsl(220 80% 60%), hsl(300 70% 50%))` will produce a cleaner blue-to-violet than the RGB-space default. For long gradients, adding intermediate color stops at the midpoint (with a slightly boosted saturation value) prevents the washed-out center that plagues many chromatic gradients. Grain or noise texture layered over gradients — via SVG filter, canvas, or a semi-transparent noise image — adds tactility that prevents the 'screen-printed' look of pure smooth gradients.
