CSS Gradient Guide: Linear, Radial, and Conic Patterns

CSS gradients create smooth transitions between colors without images, resulting in zero HTTP requests, infinite scalability, and tiny file sizes. Modern CSS supports three gradient types, each with powerful configuration options. This guide covers them all with practical examples you can use immediately.

Linear Gradients

The most common type, transitioning along a straight line:

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

/* With angle */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* With direction keywords */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Color Stops

Control where each color appears:

/* Even distribution (default) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Custom positions */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Hard stop (no transition) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Multi-Stop Gradients

Create complex color transitions:

/* Sunset gradient */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Rainbow */
background: linear-gradient(
  90deg,
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Create linear gradients visually with our Gradient Generator — adjust colors, angles, and stops in real-time.

Radial Gradients

Radiate outward from a center point:

/* Circle from center */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellipse (default shape) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Custom position */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Size Keywords

/* closest-side: gradient reaches nearest edge */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: gradient reaches farthest corner (default) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Explicit size */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Conic Gradients

Rotate around a center point like a pie chart:

/* Basic conic */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Pie chart segments */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* From specific angle */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Custom center */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Repeating Gradients

All three types support repeating patterns:

/* Striped pattern */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Checkerboard (using conic) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Layering Multiple Gradients

CSS supports multiple backgrounds, enabling complex effects:

/* Gradient overlay on image */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Cross-hatch pattern */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Practical UI Patterns

Gradient Text

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

Gradient Borders

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Animated Gradient Background

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

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

Performance Considerations

Gradients are GPU-accelerated and performant:

Gradients render faster than equivalent images
background-size affects rendering cost — smaller tiles are cheaper
Avoid animating gradient colors directly — animate background-position instead
Complex gradients with many stops are still faster than PNGs

Browser Support

All modern browsers support linear, radial, and conic gradients. Conic gradients are the newest, supported since 2020 in all major browsers (Chrome 69+, Firefox 83+, Safari 12.1+). No vendor prefixes are needed for any gradient type.

FAQ

How do I create a smooth gradient between two colors that look muddy?

Muddy gradients happen when transitioning between colors that pass through gray on the color wheel. Solutions: add an intermediate color stop at the midpoint in a brighter hue, use oklch color space (linear-gradient(in oklch, ...)) for perceptually uniform transitions, or increase the saturation of the midpoint color.

Can gradients replace images for backgrounds?

For abstract patterns, overlays, and decorative backgrounds — absolutely. Gradients have zero load time, scale perfectly, and require no HTTP requests. For complex visuals or photographs, images are still necessary. Many modern designs combine both: a gradient overlay on a background image.

Related Resources

Gradient Generator — Create CSS gradients visually
Color Palette Design Tips — Choose colors for your gradients
Color Formats Explained — Understand color notation in CSS