CSS Gradients — The Complete Guide

CSS gradients are indispensable in modern web design. From subtle button backgrounds to dramatic full-screen effects, gradients are everywhere. This guide systematically covers the three CSS gradient types—linear, radial, and conic—and shows you how to use them effectively in real projects.

1. Linear Gradients (linear-gradient)

Linear gradients are the most commonly used type, transitioning colors along a straight-line direction.

Basic Syntax

/* Top to bottom (default direction) */
background: linear-gradient(red, blue);

/* Specified angle: 45 degrees */
background: linear-gradient(45deg, #667eea, #764ba2);

/* Using direction keywords */
background: linear-gradient(to right, #667eea, #764ba2);

/* Multi-color gradient */
background: linear-gradient(to right, #667eea, #764ba2, #f093fb, #667eea);

Color Stops

Color stops let you precisely control where each color appears in the gradient. Stop positions can be specified as percentages or pixel values:

background: linear-gradient(
  to right,
  #667eea 0%,
  #764ba2 30%,
  #f093fb 60%,
  #f5576c 100%
);

When stop positions are adjacent or overlapping, you can create hard edges—very useful for stripe patterns:

/* Hard-edge stripes */
background: linear-gradient(
  to right,
  #667eea 0%, #667eea 33.3%,
  #764ba2 33.3%, #764ba2 66.6%,
  #f093fb 66.6%, #f093fb 100%
);

Demo

2. Radial Gradients (radial-gradient)

Radial gradients radiate outward from a center point, creating circular or elliptical effects. Ideal for spotlights, sphere textures, and glows.

Basic Syntax

/* Default circular gradient */
background: radial-gradient(red, blue);

/* Specified shape and size */
background: radial-gradient(circle at center, #667eea, transparent);

/* Elliptical, offset center */
background: radial-gradient(ellipse at 30% 50%, #667eea, #1a1a2e);

/* Control gradient size */
background: radial-gradient(circle closest-side, #667eea, #764ba2);

Size Keywords

• closest-side — Gradient radius reaches the nearest container edge
• farthest-side — Gradient radius reaches the farthest container edge
• closest-corner — Gradient radius reaches the nearest corner
• farthest-corner — Gradient radius reaches the farthest corner (default)

3. Conic Gradients (conic-gradient)

Conic gradients rotate color transitions around a center point, similar to a pie chart or color wheel. They're the newest gradient type in CSS but can create unique effects.

/* Basic conic gradient */
background: conic-gradient(red, yellow, green, blue, red);

/* Specified start angle */
background: conic-gradient(from 45deg, #667eea, #764ba2, #f093fb, #667eea);

/* Pie chart effect */
background: conic-gradient(
  #667eea 0% 25%,
  #764ba2 25% 50%,
  #f093fb 50% 75%,
  #f5576c 75% 100%
);

Conic gradients are particularly useful for: pie charts (data visualization), color wheel pickers, loading animations, and rotating background effects.

4. Repeating Gradients (repeating-gradient)

Repeating gradients automatically tile the gradient pattern—perfect for stripes, grids, and other repeating patterns:

/* Repeating linear gradient — striped background */
background: repeating-linear-gradient(
  45deg,
  #667eea,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);

/* Repeating radial gradient — concentric circles */
background: repeating-radial-gradient(
  circle,
  #667eea,
  #667eea 10px,
  transparent 10px,
  transparent 20px
);

5. Gradient Text Effect

Applying gradients to text is a popular design technique. The core principle is clipping a gradient background to the text shape:

.gradient-text {
  background: linear-gradient(90deg, #667eea, #f093fb, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  font-weight: 700;
}

6. Animated Gradients

CSS gradient values can't be directly animated with transition or @keyframes. But there are two mainstream approaches for smooth gradient animations:

Approach 1: background-size + background-position

.animated-gradient {
  background: linear-gradient(
    -45deg,
    #667eea, #764ba2, #f093fb, #f5576c,
    #667eea, #764ba2
  );
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

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

Approach 2: CSS Houdini @property

By registering custom properties with @property, you can directly animate gradient colors and angles:

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --color1 {
  syntax: '<color>';
  initial-value: #667eea;
  inherits: false;
}

.spinning-gradient {
  background: linear-gradient(var(--angle), var(--color1), #764ba2);
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to { --angle: 360deg; }
}

7. Gradient Stacking & Blending

Multiple gradients can be layered with commas to create richer effects:

/* Gradient stacking — grid + glow */
background:
  radial-gradient(circle at 20% 50%, rgba(102,126,234,0.3), transparent 50%),
  radial-gradient(circle at 80% 20%, rgba(240,147,251,0.3), transparent 50%),
  linear-gradient(135deg, #1a1a2e, #16213e);
  
/* With background-blend-mode */
background:
  linear-gradient(45deg, #667eea, #764ba2),
  linear-gradient(135deg, #f093fb, #f5576c);
background-blend-mode: overlay;

8. Recommended Tools

Writing complex gradient code by hand is tedious. Online tools can help you quickly generate and debug gradient effects:

• CSS Gradient Generator — Visually edit gradients, supports all three types, with live preview and code export
• Gradient Animation Tool — One-click gradient animation code generation

9. Best Practices Summary

• Use transparent or rgba() for fade-out effects
• Prefer angle values over direction keywords for more precise control
• With repeating gradients, watch the cycle length to avoid patterns that are too dense (performance)
• For animated gradients, prefer the background-size approach for better browser compatibility
• When stacking gradients, note the layer order—the first gradient appears on top
• Provide a solid-color fallback for progressive enhancement

FAQ

Can CSS gradients be animated?

CSS gradient values can't be directly animated with transition, but you can achieve smooth animation using background-size with background-position, or use CSS Houdini @property to register custom properties and animate gradient angles and colors directly.

What's the difference between linear and radial gradients?

Linear gradients transition colors along a straight line—great for backgrounds and buttons. Radial gradients radiate outward from a center point—ideal for spotlight effects, sphere textures, and glows.

How do I create gradient text?

Use background-clip: text combined with -webkit-text-fill-color: transparent to clip a gradient background to the text shape, creating a gradient text effect.