Linear vs radial vs conic CSS gradients

CSS supports three fundamentally different gradient shapes: linear, radial, and conic. They solve different problems, and picking the wrong one is one of the most common reasons a gradient looks flat or unnatural. Here is what each one actually does and when to reach for it.

Linear gradients

linear-gradient() paints color bands along a straight line at a given angle, then stretches them across the whole element perpendicular to that line. This is the default choice for backgrounds, buttons, and cards: it reads as calm and directional, and an angle like 90deg or 135deg gives a clear sense of a light source or motion. A basic example is linear-gradient(90deg, #7c5cff 0%, #22d3ee 100%).

Use linear gradients for hero backgrounds, subtle card edges, and anywhere you want the eye to move smoothly in one direction.

Radial gradients

radial-gradient() starts from a center point and expands outward in circles or ellipses, for example radial-gradient(circle at center, #7c5cff 0%, #22d3ee 100%). It draws attention to the middle of an element rather than a direction, which makes it useful for spotlight effects, glows behind an icon or heading, or a soft vignette at the edge of a page.

Radial gradients are also the natural choice for anything meant to look like a light source: a glow, a highlight, or a soft halo behind content.

Conic gradients

conic-gradient() sweeps colors around a center point like the hands of a clock, rather than outward from it, for example conic-gradient(from 90deg at 50% 50%, #7c5cff 0%, #22d3ee 100%). It is the shape behind color wheels, pie-chart style visuals, and sweep-style loading spinners, and it is also useful for subtle angled effects that neither a linear nor a radial gradient can produce.

Reach for a conic gradient when you specifically need rotational color, not directional or radiating color. Using one where a linear gradient would do usually looks busier than intended.

Variations worth knowing

Beyond the three base shapes, a few variations are worth having in your toolkit:

• Diamond: four linear ramps meeting at the center corners, giving a faceted look rather than a smooth radial fade.
• Reflected: a linear gradient mirrored around its midpoint, so the same colors ramp out and back in, useful for symmetric effects like a subtle sheen.
• Angle offset: both linear and conic gradients accept a starting angle, which lets the same set of stops read completely differently depending on orientation.

Choosing in practice

If you are not sure which to use, start with linear for anything structural (backgrounds, buttons, section dividers), reach for radial when you want a focal point, and use conic only when the effect genuinely needs to rotate around a center. Build and preview all of these live, with multi-stop support and instant CSS output, in the gradient generator.