Linear vs Radial vs Conic Gradients in CSS: When to Use Each

CSS has three gradient functions — linear-gradient(), radial-gradient(), and conic-gradient() — and each has a distinct job. Despite looking different on screen, all three produce a value of type <image>, which means they are interchangeable anywhere a CSS image can appear: background, border-image, mask, even list-style-image. Knowing which function fits a given shape is the difference between three lines of CSS and a weekend of fighting the browser.

This guide walks through the syntax of each function, their practical use cases, the repeating-* variants for patterns, a quick decision checklist, and one subtle color behavior that catches almost every developer off guard.

linear-gradient()

Syntax

linear-gradient() draws color along a straight line from one edge of the element to the other.

linear-gradient( <angle> | to <side>, <color-stop>, ... )

The direction can be expressed as an angle in degrees or as a keyword. CSS angles measure clockwise from the top of the element: 0deg points upward, 90deg points to the right, 180deg points downward. The to right keyword is equivalent to 90deg.

/* Diagonal, top-left to bottom-right */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Downward (default when no direction given) */
background: linear-gradient(to bottom, #f8fafc, #e2e8f0);

/* Precise angle */
background: linear-gradient(160deg, #0f172a 0%, #1e40af 60%, #7c3aed 100%);

Color stops

Each stop is a color optionally followed by one or two positions (lengths or percentages). Without positions, stops are distributed evenly. You can stack two stops at the same position to create a hard edge with no transition.

/* Hard stripes — stops share the same position */
background: linear-gradient(
    to right,
    #1e40af 0% 50%,
    #7c3aed 50% 100%
);

Use cases

Linear gradients handle most everyday needs: page section backgrounds, button fills, subtle header washes, and section dividers. A very common pattern is a near-flat gradient using two close shades of the same hue to add depth without obvious color shift.

Text gradients are another application. Set the gradient as background, then clip it to the text with background-clip: text and color: transparent:

.gradient-text {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

Build any of these visually with the CSS Gradient Generator — no mental math required.

radial-gradient()

Syntax

radial-gradient() radiates color outward from a center point in an ellipse or circle.

radial-gradient( <shape> <size> at <position>, <color-stop>, ... )

Shape is either ellipse (default) or circle. Size controls how far the gradient extends. The most useful size keywords are:

• farthest-corner — extends to the farthest corner of the box (default)
• closest-side — stops at the nearest edge, useful for contained glows
• farthest-side — extends to the farthest edge
• closest-corner — stops at the nearest corner

The at keyword positions the center. The default is center, but any CSS position value works: at top left, at 20% 80%.

Examples

/* Soft center glow */
background: radial-gradient(circle at center, #7c3aed33 0%, transparent 70%);

/* Corner spotlight */
background: radial-gradient(ellipse at top right, #f0abfc, #a78bfa, #1e1b4b);

/* Vignette overlay (dark edges) */
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);

Use cases

Radial gradients excel wherever light seems to emanate from a point: glows around hero elements, spotlight effects on dark backgrounds, soft vignette overlays on images, and "illuminated" card backgrounds. Use circle for symmetric glows and ellipse when the element is much wider than it is tall (most backgrounds).

conic-gradient()

Syntax

conic-gradient() sweeps color stops around a center point — like the hands of a clock moving through colors.

conic-gradient( from <angle> at <position>, <color-stop>, ... )

The optional from <angle> rotates the starting point of the sweep. By default it starts at 0deg (top, 12 o'clock). Color stops use the same syntax as linear-gradient, but positions are angles (degrees) rather than lengths or percentages. Percentages also work and are calculated as a fraction of the full 360 degrees.

Examples

/* Pie chart: three segments */
background: conic-gradient(
    #3b82f6 0% 40%,
    #f59e0b 40% 70%,
    #10b981 70% 100%
);
border-radius: 50%;

/* Full color wheel */
background: conic-gradient(
    hsl(0,100%,50%),
    hsl(60,100%,50%),
    hsl(120,100%,50%),
    hsl(180,100%,50%),
    hsl(240,100%,50%),
    hsl(300,100%,50%),
    hsl(360,100%,50%)
);
border-radius: 50%;

/* Loading spinner accent */
background: conic-gradient(from 0deg, transparent 0% 80%, #6366f1 80% 100%);
border-radius: 50%;

Use cases

Conic gradients are the native CSS answer for pie charts and donut charts — combine a conic gradient with border-radius: 50% and a centered mask for the donut hole. They also produce color wheels (set each stop to a hue value at even degree intervals), loading spinners with a sweep, and angular accent shapes on cards or badges.

repeating-conic-gradient() tiles the pattern repeatedly around the center, making checkerboard patterns trivial:

/* Checkerboard */
background: repeating-conic-gradient(#e2e8f0 0% 25%, #94a3b8 25% 50%);
background-size: 40px 40px;

The repeating-* variants

All three gradient functions have a repeating- counterpart that tiles the defined stop pattern across the full gradient axis:

• repeating-linear-gradient() — diagonal or horizontal stripes, ruled lines, hatching patterns
• repeating-radial-gradient() — concentric rings, ripple effects, target reticles
• repeating-conic-gradient() — checkerboards, pie segments of equal size, starburst rays

With repeating variants, define only one "tile" in your stops and the browser mirrors it outward. Use hard stop pairs (two stops at the same position) to get crisp edges with no blur.

/* Diagonal stripes */
background: repeating-linear-gradient(
    45deg,
    #e2e8f0,
    #e2e8f0 10px,
    #f8fafc 10px,
    #f8fafc 20px
);

Quick decision guide

Pick the right function in three questions:

• Want a flat directional wash across the element? Use linear-gradient.
• Want light or color emanating from a point or the center? Use radial-gradient.
• Want color to sweep or rotate around a center point? Use conic-gradient.

When in doubt, prototype all three in the CSS Gradient Generator — the visual difference is immediately obvious in the preview.

For richer multi-layer designs, remember you can stack multiple gradients as a comma-separated list in the background shorthand. A radial glow layered on top of a linear base is two values separated by a comma, no extra properties needed.

Gotcha: the gray dead-zone

There is one color behavior that surprises almost everyone working with gradients for the first time. When you transition between two colors that sit opposite each other on the color wheel — complementary pairs like red and cyan, blue and orange, or green and magenta — the midpoint of the gradient can mute to a flat, desaturated gray. This happens because the browser interpolates in the sRGB color space, and the two hues cancel each other out at the halfway point before either has fully faded.

The fix involves either adding intermediate color stops to guide the transition around the wheel, or switching the interpolation color space using the CSS Color 4 in oklab or in hsl hint. The full explanation and working code examples are in Fix the gray dead-zone in CSS gradients. If you are building gradients between bold, saturated colors, it is worth a read before you ship.

For a broader look at how gradients can be layered into complete background designs, see Modern CSS gradient backgrounds (copy-paste ready).

Conclusion

The three gradient functions cover every practical shape: lines, circles, and sweeps. Linear gradients handle backgrounds and text fills. Radial gradients produce glows and spotlights. Conic gradients unlock pie charts and color wheels. The repeating variants extend each into tiling patterns without any extra markup.

Understanding the underlying geometry — direction vector, center point, angular sweep — makes the syntax predictable rather than something to look up every time. Once you have the shape in mind, the CSS Gradient Generator handles the precise values so you can focus on getting the design right.

Frequently Asked Questions

Which gradient is best for backgrounds?

linear-gradient is the most common choice for backgrounds because it produces a clean directional wash. A shallow angle (150–170 degrees) with two close shades of the same hue gives subtle depth without an obvious color shift. For a soft center-lit background, radial-gradient from the center with a transparent outer stop also works well.

How do I make a circular gradient?

Use radial-gradient with the circle shape keyword:

background: radial-gradient(circle at center, #7c3aed, #1e1b4b);

By default, radial-gradient produces an ellipse. Adding circle forces equal radii on both axes. Reposition the center with the at keyword — for example, circle at top left — to create a corner glow.

Can I animate CSS gradients?

CSS cannot interpolate between two gradient values directly — transition on background will not produce a smooth animation. Two workarounds exist:

• Animate background-position on an oversized gradient image to create a scrolling or shifting effect.
• Register a custom property with @property (specifying its syntax and initial value) and animate that property. The browser then knows the type and can interpolate the angle or color stop values correctly.

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.spinning {
    background: conic-gradient(from var(--angle), #6366f1, transparent);
    animation: spin 2s linear infinite;
}

@keyframes spin {
    to { --angle: 360deg; }
}