← All guides

CSS Gradients Explained: A Complete Guide

Linear, radial and conic gradients — the syntax, the gotchas, and gradient text.

The three gradient types

CSS has three gradient functions, each used as a background-image value:

• linear-gradient() — colors transition along a straight line at a given angle. The most common gradient type, used for buttons, hero backgrounds, and overlays.
• radial-gradient() — colors radiate outward from a center point, like a spotlight or a glow.
• conic-gradient() — colors sweep around a center point like a color wheel or pie chart, rather than radiating outward.

linear-gradient() syntax

background: linear-gradient(90deg, #6366f1, #a855f7);
/* or with a direction keyword instead of degrees */
background: linear-gradient(to right, #6366f1, #a855f7);

The first argument is the direction — either an angle (0deg points up, and angles increase clockwise) or a to <side> keyword. Every argument after that is a color stop, applied in order along that line.

Multi-stop gradients and explicit positions

You can add as many color stops as you like, and optionally pin each one to an explicit position:

background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

Without explicit positions, stops are spaced evenly. Stop positions must increase left-to-right in the list — an out-of-order position is clamped up to the previous stop's value, which is a common source of a gradient that doesn't look like what you expected.

radial-gradient() and conic-gradient() basics

background: radial-gradient(circle, #6366f1, #1e1b4b);
background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);

radial-gradient() defaults to an ellipse matching the element's aspect ratio; add the circle keyword to force a perfect circle. conic-gradient() is the natural choice for pie-chart-style visualizations or hue-wheel color pickers.

Gradient text

To apply a gradient to text instead of a background box:

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #00d4aa);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

The gradient still renders as a background image; background-clip: text clips it to the shape of the text glyphs, and color: transparent lets that clipped background show through instead of a solid text color.

Common mistakes

• Out-of-order stop positions silently clamp instead of erroring — a gradient that "looks wrong" is often just this.
• Forgetting -webkit-background-clip breaks gradient text in Safari.
• Stacking multiple gradients with matching hard-edge stops (two adjacent stops at the same position) to fake solid color bands — valid, but easy to get the position math wrong and end up with an unwanted soft blend instead of a hard edge.