CSS Gradient Guide: Linear & Radial

A CSS gradient is a smooth color transition rendered directly by the browser, with no image file involved. Gradients are written as a value for background-image or the background shorthand, and the two types you will use in almost every real project are linear-gradient and radial-gradient.

Because the browser renders the gradient instead of downloading an image, you get infinite resolution at any screen size, zero extra HTTP requests, and a value that is easy to tweak directly in your stylesheet.

Linear Gradient Syntax

background: linear-gradient(angle, color1 pos1, color2 pos2, ...);

• angle: the direction of the gradient line in degrees. 0deg points up, 90deg points right, 180deg points down, 270deg points left. You can also use keywords like to right or to bottom left.
• color stops: two or more colors, each with an optional position percentage. If you skip the positions, the browser spaces every stop evenly.

/* Simple two-color gradient, default top-to-bottom */
.banner {
  background: linear-gradient(#7c6af7, #38bdf8);
}

/* Diagonal gradient with an explicit angle */
.banner {
  background: linear-gradient(135deg, #7c6af7, #38bdf8);
}

/* Three color stops with explicit positions */
.sunset {
  background: linear-gradient(180deg, #ff7e5f 0%, #feb47b 50%, #fff1c1 100%);
}

Radial Gradient Syntax

background: radial-gradient(shape at position, color1 pos1, color2 pos2, ...);

• shape: usually circle or ellipse, which is the default if you skip it.
• position: where the center sits, set with keywords like center or with percentages for x and y.
• color stops: same idea as linear gradients, spreading outward from the center instead of along a line.

/* Basic radial gradient, centered by default */
.spotlight {
  background: radial-gradient(circle, #ffffff, #1a1d27);
}

/* Off-center radial gradient */
.spotlight {
  background: radial-gradient(circle at 30% 20%, #ffffff, #1a1d27);
}

/* Elliptical gradient stretched to the element's shape */
.badge {
  background: radial-gradient(ellipse, #feda75, #d62976);
}

Multi-Stop Gradients

Gradients are not limited to two colors. Add as many color stops as you need, each with its own position, and the browser blends smoothly through every one of them in the order you list them.

/* Four-stop gradient for a richer color transition */
.aurora {
  background: linear-gradient(90deg,
    #00d4aa 0%,
    #3b82f6 35%,
    #7c6af7 70%,
    #f093fb 100%);
}

Transparent Gradients

To fade a gradient into transparency, use rgba() or hsla() with an alpha value of 0 rather than the keyword transparent. The keyword can introduce a gray banding artifact in some browsers because it has no defined color, only zero opacity.

/* Correct: fades to transparent black, no banding */
.overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}

Common Gradient Patterns

Subtle UI Background

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

Button Gradient

background: linear-gradient(90deg, #7c6af7 0%, #38bdf8 100%);

Radial Spotlight

background: radial-gradient(circle at 50% 30%, #ffffff 0%, #1a1d27 100%);

Animating Gradients

The transition property cannot smoothly animate between two different gradient values directly, since gradients are not a single interpolatable value the way a color or a number is. Two practical workarounds cover most cases:

• Animate background-position: make the gradient larger than the element with background-size, then animate background-position to create a moving color effect.
• Cross-fade two layers: stack two elements with different gradients and transition the opacity of the top one.

When to Use Linear vs Radial

• Linear gradients: buttons, page backgrounds, banners, and anywhere direction matters, like a top-to-bottom fade over an image.
• Radial gradients: spotlight or glow effects, badges, and backgrounds that should draw attention to a center point.
• Multi-stop gradients: sunset, aurora, or brand-color transitions that need more than two colors to look natural.

Browser Support

Unprefixed linear-gradient() and radial-gradient() are supported in every browser in current use, including Chrome, Firefox, Safari, and Edge. Vendor prefixes like -webkit- are only relevant for browser versions that no longer receive updates.

Frequently Asked Questions

What is the difference between linear-gradient and radial-gradient?

linear-gradient transitions colors along a straight line at a chosen angle. radial-gradient transitions colors outward from a center point in a circular or elliptical shape.

Do I need vendor prefixes for CSS gradients?

No. Unprefixed linear-gradient and radial-gradient have full support in every modern browser. Vendor prefixes are only needed for browsers that stopped receiving updates years ago.

Why does my gradient look gray or muddy in the middle?

This happens when transitioning between very different hues in the default RGB color space, since the midpoint blend can desaturate. Adding an extra color stop near the midpoint, or switching to a gradient built in OKLCH, usually fixes it.

Can I animate a CSS gradient?

Gradients cannot be smoothly animated with the transition property directly. The common workaround is animating background-position on an oversized gradient, or cross-fading two layered gradients with an opacity transition.

How many color stops can a gradient have?

There is no hard limit, but two to five stops cover most real designs. Adding many more stops increases rendering cost slightly and usually makes the gradient harder to read and maintain.