CSS Gradients in 2026: Linear, Radial, Conic and Beyond
Gradients went from skeuomorphic relic to the defining look of modern product sites. The CSS has grown too: three gradient types, color-space control, and tricks that used to need images.
The three types in one minute
- linear-gradient(135deg, …) — light sweeps in one direction; the workhorse for buttons and hero backdrops.
- radial-gradient(circle at 30% 20%, …) — glow from a point; stack several for soft 'aurora' backgrounds.
- conic-gradient(from 90deg, …) — sweeps around a center; pie charts, color wheels and holographic edges.
Why your gradient looks muddy
Browsers blend gradients in sRGB by default, which drags blue-to-yellow blends through gray. Interpolating in OKLab keeps the middle vivid: linear-gradient(in oklab, #2463eb, #f4c430). Support is broad across modern browsers — worst case, others fall back to the sRGB look.
Fixing banding
Large, slow gradients show visible steps on cheap displays. Add gentle noise (a tiny tiled PNG or SVG turbulence overlay at 2–4% opacity) or shorten the distance the gradient has to travel.
Text gradients that don't break accessibility
background-clip: text makes headline gradients trivial, but the gradient's darkest stop still needs to pass contrast against the page background — screen readers don't care, low-vision users do. Keep every stop above 4.5:1 for important headlines.
Build and preview any of these in the gradient generator — it writes the fallback color and full CSS for you.
Sources and further reading
- <gradient> CSS data type · MDN Web Docs
- linear-gradient() · MDN Web Docs