Linear, Radial, Conic: Picking the Right CSS Gradient

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.