Linear vs Radial vs Conic Gradients: What's the Difference?
Quick Comparison
CSS supports three types of gradients. Each creates color transitions in a different way:
Linear Gradients
Linear gradients are the most common type. Colors transition along a straight line, and you control the direction with angles or keywords.
background: linear-gradient(135deg, #667eea, #764ba2);
When to Use
Key Features
- Control direction with angles (0-360 degrees)
- Use keywords:
to top,to right,to bottom,to left - Supports multiple color stops
- Best for directional color flow
Radial Gradients
Radial gradients start from a center point and spread outward in a circular or elliptical pattern.
background: radial-gradient(circle, #667eea, #764ba2);
When to Use
Key Features
- Shape:
circleorellipse - Size keywords:
closest-side,farthest-corner, etc. - Position the center with
at X Y - Best for focal point effects
background: radial-gradient(circle at top right, #667eea, #764ba2);
Conic Gradients
Conic gradients rotate colors around a center point, similar to a color wheel or pie chart. The transition happens along the angle, not the radius.
background: conic-gradient(#667eea, #764ba2, #f093fb, #667eea);
When to Use
Key Features
- Colors rotate around center point
- Start angle with
from 90deg - Position center with
at X Y - Best for circular/rotational visualizations
Tip: Always repeat the first color at the end for smooth conic gradients.
Choosing the Right Type
| Need | Best Choice |
|---|---|
| Directional color flow | Linear |
| Centered spotlight effect | Radial |
| Pie chart or progress ring | Conic |
| Button background | Linear (usually) |
| Glow effect behind element | Radial |
| Circular visualization | Conic |
Browser Support
All three gradient types have excellent browser support in modern browsers:
- Linear gradients — Supported everywhere (including IE10+)
- Radial gradients — Supported everywhere (including IE10+)
- Conic gradients — Supported in all modern browsers (Chrome 69+, Firefox 83+, Safari 12.1+)
Note: Conic gradients have slightly less support than linear and radial. Consider fallbacks for older browsers.
Ready to Create Your Gradient?
Use our free CSS gradient generator with all three types
Create Gradient →