CSS Gradients Explained: Linear, Radial, and Conic

A CSS gradient is a <image> value that renders a smooth transition between two or more colors, generated by the browser instead of loaded from a file. There are three shapes — linear, radial, and conic — and each can be dropped anywhere an image is accepted: background, border-image, even mask. Because they’re computed, not decoded, gradients scale to any size with zero extra network requests and stay sharp on every display density.

Linear gradients: transitions along a line

linear-gradient() draws color stops along a straight line, most often used as a background:

.banner {
  background: linear-gradient(90deg, #6366f1, #ec4899);
}

The first argument is the direction — an angle in degrees, or a keyword like to right or to bottom left. Color stops can carry explicit positions:

background: linear-gradient(
  to right,
  #6366f1 0%,
  #8b5cf6 40%,
  #ec4899 100%
);

Stops don’t have to be evenly spaced, and you can layer multiple gradients (or a gradient over a photo) by comma-separating them in a single background declaration, with the first listed painted on top.

Radial gradients: transitions from a center point

radial-gradient() radiates color outward from a point instead of along a line:

.spotlight {
  background: radial-gradient(circle at center, #fbbf24, #1f2937 70%);
}

The shape defaults to an ellipse that fills its box, but circle forces a perfect circle. The at keyword repositions the center — at top left, at 30% 60%, or exact lengths — which makes radial gradients useful for spotlight effects, subtle vignettes, or faux-3D buttons without extra markup.

Conic gradients: transitions around a point

conic-gradient() sweeps colors around a center point like a color wheel, rather than outward from it:

.wheel {
  background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);
}

This is the shape that made CSS-only pie charts and loading spinners practical, since percentages map directly onto the 360-degree sweep:

.progress-ring {
  background: conic-gradient(#22c55e 0% 65%, #e5e7eb 65% 100%);
}

Hard stops and color bands

Any gradient becomes a series of solid bands, rather than a smooth blend, when two color stops share the same position:

background: linear-gradient(
  to right,
  #6366f1 0%, #6366f1 50%,
  #ec4899 50%, #ec4899 100%
);

This trick is common for striped patterns, custom checkbox fills, and chart-like visuals that don’t warrant an SVG.

Interpolation color space

Modern browsers let you specify the color space a gradient interpolates through, using in <space> right after the direction or shape:

background: linear-gradient(to right in oklch, #6366f1, #ec4899);

The default (srgb) can produce a dull, grayish band in the middle of a gradient between saturated hues. Perceptually uniform spaces like oklch or lch avoid that muddiness and tend to look more vivid across the transition. This pairs naturally with the newer CSS color functions, which expose the same color spaces for solid colors.

Gradients vs images

	CSS gradients	Image files
Network requests	None	One per image
Scaling	Infinite, no artifacts	Fixed resolution, can blur or pixelate
File weight	Zero (pure CSS)	Adds to page weight
Editability	Change in the stylesheet	Requires re-exporting the asset
Complex textures/photos	Not possible	Necessary

For flat color transitions — buttons, banners, overlays, chart fills — a gradient is almost always the better choice: it’s themeable with custom properties, responds instantly to dark mode, and adds nothing to the page’s byte count. Save actual image files for photographs and complex textures a gradient can’t approximate.

Animating gradients

Gradients themselves don’t animate smoothly with background-position the way people expect, because the browser recomputes the whole gradient rather than sliding it. For a genuinely animated gradient, either animate a custom property feeding an angle or color stop (registered with @property for smooth interpolation) or use a background twice the element’s size and animate its position. If you just need to animate opacity or a solid color, CSS transitions handle that more cheaply than a gradient trick.

Browser support and fallbacks

Linear and radial gradients have been broadly supported for years. Conic gradients and the in <color-space> interpolation syntax are newer; if you need to support older browsers, declare a solid background-color before the gradient declaration — browsers that don’t understand the second line simply ignore it and keep the solid fallback, since CSS silently drops declarations it can’t parse.

The takeaway

CSS gradients replace a whole category of image assets with a few lines of styling: linear-gradient() for directional transitions, radial-gradient() for transitions from a point, and conic-gradient() for sweeps around one. Add explicit color-space interpolation when a gradient looks muddy in the middle, use hard stops for banding effects, and reach for an actual image file only when you need a texture or photograph a gradient can’t fake.