CSS Gradients: From Basics to Beautiful Backgrounds

Gradients can transform a flat design into something that feels polished and professional. Here's everything you need to know.

Linear Gradients

The most common type — colors transition along a straight line.

/* Top to bottom (default) */
background: linear-gradient(#3b82f6, #8b5cf6);

/* With angle */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multiple color stops */
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);

Direction Keywords

Instead of angles, you can use keywords:

background: linear-gradient(to right, #3b82f6, #8b5cf6);
background: linear-gradient(to bottom right, #3b82f6, #8b5cf6);

Color Stops

You can control exactly where each color appears:

/* Color at specific positions */
background: linear-gradient(
  90deg,
  #3b82f6 0%,
  #8b5cf6 50%,
  #ec4899 100%
);

/* Hard color stops (no transition) */
background: linear-gradient(
  90deg,
  #3b82f6 50%,
  #8b5cf6 50%
);

Radial Gradients

Colors radiate outward from a center point:

/* Default: ellipse from center */
background: radial-gradient(#3b82f6, #1e3a8a);

/* Circle shape */
background: radial-gradient(circle, #3b82f6, #1e3a8a);

/* Custom position */
background: radial-gradient(circle at 25% 25%, #3b82f6, transparent);

Real-World Patterns

Subtle page background

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Glassmorphism overlay

background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.1),
  rgba(255, 255, 255, 0.05)
);
backdrop-filter: blur(10px);

Text gradient

.gradient-text {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Animated gradient

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

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

Performance Tips

1. Gradients are rendered by the GPU — they're fast and don't affect performance
2. Avoid very complex gradients with 10+ color stops on large areas
3. Use will-change: background for animated gradients
4. Prefer CSS gradients over images — they're resolution-independent and load instantly

Browser Support

CSS gradients work in all modern browsers. No prefixes needed since 2015.

Try It Yourself

Use our CSS Gradient Generator to visually create gradients with multiple color stops, adjust angles, and copy the CSS instantly. It supports both linear and radial gradients.