Linear, Radial, Conic: Picking the Right CSS Gradient
Three gradient functions, three personalities. When to use each, how to ease them, and how to interpolate in OKLCH so the middle stays clean.
CSS gives you three native gradient flavors. Each has a different personality and a different best-use. Pick the wrong one and your hero feels off without you knowing why.
Linear: the workhorse
linear-gradient(135deg, A, B). A straight color sweep at any angle. Calm, directional, perfect for backgrounds, banners, button surfaces and section dividers. Most overused gradient on the web - and for good reason: it never gets in the way.
When to reach for linear: any time you need ambient color without drawing attention.
Radial: the spotlight
radial-gradient(circle at 30% 20%, A, B). Color radiates outward from a point. Naturally focuses the eye - great for hero illustrations, button glow effects, and the "depth" trick where you place a soft radial behind a card to make it feel raised.
Useful pattern: stack two or three transparent radials at different positions to fake a mesh gradient. (See our mesh gradient article.)
Conic: the spinner
conic-gradient(from 0deg, red, yellow, green, blue, red). Color sweeps around a center point. Born for color wheels, pie charts and that "gradient ring" hover effect on profile avatars. Underused outside of those niches - but a single subtle conic behind a card creates the kind of glassy, holographic feel you see on Apple Vision Pro marketing pages.
The OKLCH upgrade
Native CSS gradients interpolate in sRGB by default - which is why magenta -> green often looks like sad gray in the middle. Add in oklch and the interpolation happens in a perceptually uniform space:
background: linear-gradient(in oklch 90deg, #ff7ad9, #04e762);Same colors, much cleaner middle. Works on linear, radial and conic.
Easing the stops
Even with OKLCH, a two-stop gradient transitions linearly. For richer feels, you can pre-compute eased stops and emit them with explicit positions. ease-out keeps the first color longer; ease-in pushes the change to the start. Try the easing dropdown in our Gradient Maker - the difference between linear and ease-in-out is small numerically but huge visually.
Performance note
All three gradient types are GPU-accelerated and effectively free at any size. The performance trap is animating background directly - browsers can't tween it. Animate opacity on a stack of pre-rendered gradient layers instead.
Pick a type, dial in the easing, copy the CSS - all in one screen at /gradient.