Linear vs Radial Gradients in CSS: When to Use Each
Linear vs radial gradients explained — the syntax difference, how each looks, and exactly when to use one over the other.
Both linear and radial gradients blend colors in CSS, but they create very different effects. Knowing which to reach for is the difference between a flat background and one with real depth.
You can preview and filter both types in the PaletteCSS gradients gallery.
The core difference
| Type | Color flows… | Best for |
|---|---|---|
| Linear | Along a straight line / angle | Backgrounds, buttons, headers |
| Radial | Outward from a center point | Spotlights, glows, soft vignettes |
Linear gradient syntax
background: linear-gradient(135deg, #ff8a3d, #f4600a);The angle controls direction — 0deg is bottom-to-top, 90deg is left-to-right.
Radial gradient syntax
background: radial-gradient(circle at center, #ff5fa2, #b66cf2);You can move the origin with at top left, at 30% 70%, and so on.
When to use a linear gradient
- Full-width gradient backgrounds.
- Buttons and call-to-action surfaces.
- Subtle top-to-bottom shading on cards.
When to use a radial gradient
- A glow or spotlight behind a hero element.
- Circular badges and avatars.
- Soft vignettes that draw the eye to the center.
For the full specification, see the MDN radial-gradient reference.
Frequently asked questions
Can I combine linear and radial gradients?
Yes — stack multiple gradients in one background using commas and transparency for layered effects.
Which performs better?
Both are GPU-friendly and effectively identical in performance. Choose based on the look you want.
New to gradients entirely? Start with our complete guide to CSS gradients, then browse the gallery.
