The Complete Guide to CSS Gradients: Linear, Radial & Conic

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.