Understanding CSS Gradients
CSS gradients are one of the most powerful yet underused features in modern web design. They let you create smooth transitions between two or more colors without a single image file — meaning faster load times, better scalability, and infinite creative flexibility.
In this guide, we cover all three types of CSS gradients with real-world examples.
---
1. Linear Gradients
The most common type. Colors transition along a straight line at any angle.
Basic Syntax
background: linear-gradient(direction, color1, color2, ...);Top to bottom (default):
background: linear-gradient(#6366f1, #0ea5e9);45-degree diagonal:
background: linear-gradient(45deg, #f43f5e, #a855f7, #3b82f6);Multi-stop with hard edges:
background: linear-gradient(
to right,
#ef4444 0%,
#ef4444 33%,
#22c55e 33%,
#22c55e 66%,
#3b82f6 66%
);---
2. Radial Gradients
Colors radiate outward from a central point in an ellipse or circle shape.
Default centered circle:
background: radial-gradient(circle, #a855f7 0%, #1e1b4b 100%);Glowing spotlight effect:
background: radial-gradient(circle at 30% 40%, rgba(99,102,241,0.6) 0%, transparent 60%),
#0f172a;---
3. Conic Gradients
The newest type — colors transition around a center point like a pie chart.
Classic pie chart:
background: conic-gradient(
#ef4444 0% 25%,
#f97316 25% 50%,
#22c55e 50% 75%,
#3b82f6 75% 100%
);
border-radius: 50%;---
4. Gradients for Text
h1 {
background: linear-gradient(135deg, #6366f1, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}---
5. Performance Tips
- Prefer CSS gradients over background images for geometric patterns
- Use background-size with background-repeat to create gradient patterns
- Avoid animating gradient stops directly — animate opacity or transforms instead
---
Browser Support
All three gradient types are supported in all modern browsers. For IE11, avoid conic gradients and use the -webkit- prefix for linear and radial.
Conclusion
CSS gradients are a zero-cost, scalable way to add visual depth to any interface. Use our CSS Gradient Generator tool to visually build and export gradient code without memorizing syntax.