CSS Color Gradients: Complete Guide with Examples

CSS gradients let you create smooth color transitions without image files — pure CSS, infinitely scalable, zero HTTP requests.

🎨 Try it free: Mesh Gradient Generator — Create beautiful CSS gradients visually.

---

Types of CSS Gradients

1. Linear Gradient

Transitions along a straight line.

background: linear-gradient(to right, #2D5BFF, #8B2DFF);
background: linear-gradient(135deg, #FF6B6B, #FFA500);
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));

2. Radial Gradient

Transitions outward from a center point.

background: radial-gradient(circle, #2D5BFF, #0A0A2E);
background: radial-gradient(ellipse at top, #FF6B6B, transparent);

3. Conic Gradient

Transitions around a center point (like a pie chart).

background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 45deg, #FF6B6B, #2D5BFF, #FF6B6B);

4. Mesh Gradients

Multiple overlapping radial gradients creating an organic, blurry effect.

background-color: #2D5BFF;
background-image:
  radial-gradient(at 40% 20%, #FF6B6B 0px, transparent 50%),
  radial-gradient(at 80% 0%, #8B2DFF 0px, transparent 50%),
  radial-gradient(at 0% 50%, #2DCFFF 0px, transparent 50%);

🎨 Try it free: Mesh Gradient Generator — Generate organic mesh gradients visually and copy the CSS.

---

Color Stop Syntax

/* Two stops (simplest) */
linear-gradient(#FF6B6B, #2D5BFF)

/* Multiple stops with positions */
linear-gradient(#FF6B6B 0%, #FFA500 40%, #2D5BFF 100%)

/* Sharp stops (no transition) */
linear-gradient(#FF6B6B 50%, #2D5BFF 50%)

/* Using HSL for predictable gradients */
linear-gradient(
  hsl(0, 90%, 60%),
  hsl(240, 90%, 60%)
)

---

Practical Gradient Patterns

Hero overlay (text readability)

.hero {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.7) 100%
  );
}

Glassmorphism background

.glass {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.1),
    rgba(255,255,255,0.05)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

Subtle card gradient

.card {
  background: linear-gradient(
    180deg,
    hsl(225, 20%, 14%) 0%,
    hsl(225, 20%, 12%) 100%
  );
}

---

Animated Gradients

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-bg {
  background: linear-gradient(270deg, #FF6B6B, #2D5BFF, #8B2DFF);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

---

Browser Support

All gradient types (linear, radial, conic) work in all modern browsers. Conic gradient requires Chrome 69+, Firefox 83+, Safari 12.1+. No IE11 support for conic.

---

FAQs

Can I use gradients as text fill? Yes: background-clip: text; -webkit-background-clip: text; color: transparent;

Why does my gradient look muddy in the middle? Gradients through neutral/grey midpoints appear muddy. Use HSL and choose the shorter hue path, or add a midpoint color stop.

Can I animate gradients with CSS transitions? Gradients can't be transitioned directly. Use background-position animation on an oversized gradient instead.

What's the difference between mesh gradients and regular gradients? Mesh gradients stack multiple radial gradients to create organic, multi-directional color blending. Use Mesh Gradient Generator to create them visually.

---

Conclusion

CSS gradients are one of the most powerful visual tools in your CSS toolkit. Start with linear gradients, explore radial for spotlights, and use mesh gradients for premium hero backgrounds. Generate any gradient visually with Mesh Gradient Generator and convert colors with Format Converter.