Practice
Gradient Design: CSS Syntax to Killing the Gray Band
Gradients are the cheapest source of sophistication and the easiest place to crash — muddy midpoints, fluorescent transitions, fighting stops. This guide covers linear/radial/conic syntax, stop strategy, OKLCH no-band interpolation, and 47 curated gradients as working references.
3 min read5 sections678 words
Příklad palety
Key takeaways
- The muddy midpoint of sRGB gradients is mathematical inevitability (the RGB line from red to green passes through darkness) — OKLCH interpolation is the cure
- Two stops is the floor, not the ceiling: 3-5 stops express light, material and depth, with midpoints forming a bell-shaped lightness curve
- radial suits light and focus (avatar glows, button highlights), linear suits atmosphere (hero backgrounds), conic suits rings and decoration
- Text over gradients is judged at the lowest-contrast point, not the average — legibility follows the weakest stop
Three Syntaxes: linear / radial / conic Division of Labor
linear-gradient(angle, c1, c2…) transitions along a line — the workhorse for hero backgrounds, card atmosphere and heatmaps. Angle sets mood: top-down (180deg) feels natural like skylight, diagonal (135deg) adds speed, horizontal suits segment-by-segment storytelling.
radial-gradient(shape at position, colors…) radiates from a center — born for "light": top-of-button highlights (radial at top), avatar halos, spotlight effects. conic-gradient(start angle, colors…) sweeps around the circle — the native syntax of pie charts, progress rings and color wheels; our /tools/color-wheel renders with conic.
The Gray Band: Why Red-to-Green Goes Muddy
Linear interpolation in sRGB takes arithmetic averages of RGB coordinates — red (255,0,0) to green (0,255,0) midpoints at (127,127,0), a dark olive that reads as the infamous "dirty band". This isn't taste failure but color-space math: the RGB straight line doesn't pass through high-lightness territory.
The cure is perceptually-uniform interpolation: the CSS `in oklch` interpolation hint (Chrome 111+ / Safari 16.2+ / Firefox 128+) — `linear-gradient(in oklch, #f3722c, #009e73)` keeps lightness and chroma continuous through the middle. Side-by-side sRGB vs OKLCH versions of every gradient live in our gallery at /gradients.
Stop Strategy: The World Beyond Two Stops
Two stops handle pure atmosphere; 3-5 stops express a lighting logic: bell-shaped midpoints (brighter center) = high-glow material; darker middle = twin light sources or dusk; one-way falloff = fading skylight. Positional stops (#f9c74f 45%) beat even spacing for narrative — key stops live in the 30-70% golden zone.
Keep hue spans within 90° for stability (analogous gradients); across large hue jumps (orange → teal) enable OKLCH interpolation or pin manual midpoints to hold lightness. The /tools/gradient studio supports 2-6 stops, per-stop position sliders, live preview and one-click CSS export.
Text on Gradients: Legibility First
Contrast over gradient backgrounds is evaluated at the minimum point, not the average — within the region text covers, the lightest spot must still meet 4.5:1 (body) or 3:1 (large headings). Common patterns: deliberately deepen the gradient under the text zone (local darker stops), or add a local scrim (semi-transparent dark overlay).
Decorative gradients without text enjoy freedom, but watch fatigue on large vivid areas — low-saturation cross-lightness gradients (0F4C5C → 8AC6D1) tolerate long sessions; save high-saturation gradients for above-the-fold hooks and short-attention contexts.
Reference Library and Export
Start by imitating: our /gradients gallery curates 47 editorial gradients in six families (sunset/ocean/forest/candy/dusk/Morandi), each with sRGB and OKLCH CSS versions, per-stop deep links and full value tables — copy straight into projects from each detail page.
When building your own gradient assets, naming and archiving matter: name by mood + scene (sunset-hero, ocean-card) rather than values, so design systems can reuse them. Generated sets share via hash links in /tools/gradient — send links, not screenshots.
Colors in this guide
FAQ
What if `in oklch` browser support isn't enough for my audience?
Progressive enhancement: ship the sRGB version (universal) by default, then override with the OKLCH version inside @supports (color: oklch(0% 0 0)) — modern browsers get band-free rendering while older ones keep an acceptable fallback. Every gradient in our gallery ships exactly this dual-version structure.
How do I keep gradient colors harmonized with my brand palette?
Share temperature and saturation range with the brand: build lightness series from the primary and its analogous neighbors (±30°) for the safest gradient family; for cross-hue gradients, anchor one end on the brand hue. Tune live per-stop in /tools/gradient instead of iterating CSS by hand.
Are radial gradients a performance problem on mobile?
Pure CSS gradients are composited by the GPU and outperform bitmaps and filters — use them freely. The real trap is large-area gradients with per-frame repaints (scroll-driven gradient animation); animate transform/opacity instead of gradient parameters. Static gradient backgrounds on body or hero carry no measurable cost.