CSS Gradient Guide

Complete guide to CSS gradients — linear, radial and conic — with syntax, examples, browser support and practical use cases.

What Is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors created entirely with CSS — no image files required. Gradients render on the GPU, load instantly, and scale to any screen size without pixelation.

There are three gradient functions in CSS:

  • linear-gradient() — transition along a straight line at any angle
  • radial-gradient() — transition outward from a center point
  • conic-gradient() — transition around a center point (like a clock face)

Linear Gradients

Basic Syntax

background: linear-gradient(direction, color-stop-1, color-stop-2, ...);

Simple Two-Color Gradient

background: linear-gradient(#155EEF, #7C3AED);

By default, the gradient goes from top to bottom.

Setting the Angle

background: linear-gradient(135deg, #155EEF, #7C3AED);

Common angles:

  • 0deg or to top — bottom to top
  • 90deg or to right — left to right
  • 180deg or to bottom — top to bottom (default)
  • 135deg — top-left to bottom-right (most common)
  • 45deg — bottom-left to top-right

Multiple Color Stops

background: linear-gradient(90deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF);

Positioning Stops

background: linear-gradient(90deg, #155EEF 0%, #7C3AED 50%, #EC4899 100%);

Percentages control where each color stops. This allows hard color boundaries:

background: linear-gradient(90deg, #155EEF 50%, #7C3AED 50%);

Radial Gradients

Basic Syntax

background: radial-gradient(shape size at position, color-stop-1, color-stop-2, ...);

Simple Radial Gradient

background: radial-gradient(circle, #155EEF, #7C3AED);

Shape and Size Options

  • Shape: circle or ellipse (default)
  • Size: closest-side, closest-corner, farthest-side, farthest-corner

Position

background: radial-gradient(circle at top left, #155EEF, #7C3AED);

Spotlight Effect

background: radial-gradient(circle at center, #FFFFFF 0%, transparent 70%);

Uses transparency for a glow effect. Works well over images.

Conic Gradients

Basic Syntax

background: conic-gradient(from angle at position, color-stop-1, color-stop-2, ...);

Simple Conic Gradient

background: conic-gradient(#155EEF, #7C3AED, #EC4899, #155EEF);

The gradient sweeps around the center in a full circle.

Color Wheel

background: conic-gradient(
  #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000
);

Pie Chart

background: conic-gradient(
  #155EEF 0deg 90deg,
  #7C3AED 90deg 180deg,
  #EC4899 180deg 270deg,
  #0EA5E9 270deg 360deg
);

Progress Indicator

background: conic-gradient(
  #155EEF 0deg 270deg,
  #E3EAF5 270deg 360deg
);
border-radius: 50%;

Multiple Backgrounds

CSS allows layering multiple gradients in one background property:

background:
  linear-gradient(135deg, rgba(21, 94, 239, 0.8), rgba(124, 58, 237, 0.8)),
  url('/image.jpg') center/cover;

The gradient overlays the image, providing a tinted effect.

Animated Gradients

Animate the background position for a moving gradient effect:

.animated {
  background: linear-gradient(270deg, #155EEF, #7C3AED, #EC4899);
  background-size: 600% 600%;
  animation: gradient-shift 8s ease infinite;
}

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

Making the background larger than the container (via background-size) allows the animation to shift the visible portion across the full gradient.

Text Gradient

.gradient-text {
  background: linear-gradient(135deg, #155EEF, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Apply a gradient to text using background-clip: text with a transparent text fill.

Browser Support

  • linear-gradient: All modern browsers, IE10+
  • radial-gradient: All modern browsers, IE10+
  • conic-gradient: Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+ (2020+)
  • Animating background-position: All modern browsers
  • background-clip: text: All modern browsers (with -webkit- prefix)

For broad compatibility, always include the -webkit- prefixes alongside standard properties.

Performance

CSS gradients are highly performant:

  • Rendered on the GPU
  • No network requests (unlike image backgrounds)
  • Scale infinitely without quality loss
  • Instant rendering on load
  • No caching required

Compared to background images, gradients are 10–100x smaller in file size and render faster.

Common Mistakes

Forgetting the -webkit- prefix

Safari requires -webkit-background-clip: text for gradient text. Include both prefixed and unprefixed versions.

Wrong gradient direction

Remember that 0deg points up, and the gradient transitions in that direction. 135deg goes from top-left to bottom-right, which is the most common diagonal angle.

Using rgba() with mixing

When using rgba() gradients, remember that rgba(255, 0, 0, 0.5) is not "50% transparent red" — it is red with 50% opacity. This can produce unexpected blending when layered.

Text gradient accessibility

Gradient text often fails WCAG contrast. Test both the lightest and darkest stops against the background to ensure readability.

Use Cases

  • Hero sections: Gradient backgrounds that draw attention
  • Buttons: Subtle gradients add polish to flat buttons
  • Cards: Gradient borders or backgrounds for featured content
  • Overlays: Gradient overlays on images for text readability
  • Progress bars: Conic gradients as circular indicators
  • Charts: Gradient fills under line charts
  • Decorative elements: Gradient text for headlines and logos

Related Tools

Frequently Asked Questions

Open CSS Gradient Generator →