Mastering CSS Gradients: A Complete Guide to Linear, Radial & Conic

What Are CSS Gradients?

A CSS gradient is a special type of <image> value in CSS. Unlike PNG or JPG files, gradients are generated mathematically by the browser — they scale perfectly at any resolution, never pixelate, and add zero bytes to your page load. Because they are images, they work anywhere CSS accepts background-image, including backgrounds, borders, list markers, and masks.

CSS supports three gradient types, each with a repeating variant: linear-gradient() for straight-line transitions, radial-gradient() for circular or elliptical transitions outward from a centre point, and conic-gradient() for transitions that sweep around a centre point like a clock hand.

Linear Gradients

The most common gradient type. A linear gradient transitions colours along a straight line defined by an angle or direction keyword. The angle 0deg points upward (bottom to top), 90deg points right, 180deg points down, and so on. Direction keywords like to right, to bottom left, and to top right are often more readable than angles.

/* Simple two-colour gradient */
background: linear-gradient(135deg, #7c6fff, #ff6fb0);

/* Three stops */
background: linear-gradient(90deg, #7c6fff, #c56fff 50%, #ff6fb0);

/* Direction keywords */
background: linear-gradient(to right, #0a0a0f, #1a1a3e);
background: linear-gradient(to bottom right, #7c6fff, #ff6fb0);

Colour Stop Positions

By default, colour stops are evenly spaced. You can override this with percentage or length values. Placing two stops at the same position creates a hard edge with no transition — the basis for CSS stripes and checkerboard patterns.

/* Hard edge — no transition */
background: linear-gradient(90deg, #7c6fff 50%, #ff6fb0 50%);

/* Uneven distribution — slow start, fast end */
background: linear-gradient(90deg, #7c6fff 0%, #7c6fff 70%, #ff6fb0 100%);

/* Stripe pattern */
background: repeating-linear-gradient(
  45deg,
  #7c6fff 0px,
  #7c6fff 10px,
  transparent 10px,
  transparent 20px
);

Radial Gradients

Radial gradients radiate outward from a centre point. They default to an ellipse shape that fills the element, but you can specify circle for a perfectly round gradient, control the size, and move the centre point anywhere — including outside the element for asymmetric lighting effects.

/* Circle from centre */
background: radial-gradient(circle, #7c6fff, #0a0a0f);

/* Spotlight effect — positioned off-centre */
background: radial-gradient(
  circle at 30% 40%,
  rgba(124, 111, 255, 0.6),
  transparent 60%
);

/* Multiple radial overlays for ambient lighting */
background:
  radial-gradient(ellipse at 20% 30%, rgba(124,111,255,0.4), transparent 50%),
  radial-gradient(ellipse at 80% 70%, rgba(255,111,176,0.3), transparent 50%),
  #0a0a1a;

Conic Gradients

Conic gradients sweep colour transitions around a centre point — like the hands of a clock. They are perfect for pie charts, colour wheels, and decorative spinning effects. The from keyword sets the starting angle, and at positions the centre point.

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart — 40% purple, 35% pink, 25% blue */
background: conic-gradient(
  #7c6fff 0% 40%,
  #ff6fb0 40% 75%,
  #378add 75% 100%
);

/* Starting angle */
background: conic-gradient(from 90deg, #7c6fff, #ff6fb0);

/* Angular gradient border */
.angular-border::before {
  background: conic-gradient(#7c6fff, #ff6fb0, #7c6fff);
}

Working with Multiple Colour Stops

All three gradient types support as many colour stops as you need. The browser interpolates smoothly between stops, blending hue, saturation, and lightness along the gradient line. A few practical tips for multi-stop gradients:

• Use 3–4 stops for richness — two stops feel flat; three or four stops create more dynamic, interesting gradients.
• Add a midpoint hint — you can control where 50% of the interpolation happens with a bare percentage between two stops: linear-gradient(red, 30%, blue) makes the transition happen faster.
• Match hue angles in HSL — gradients through perceptually similar hues look better than gradients crossing grey. Going from hsl(270, 70%, 60%) to hsl(330, 70%, 65%) stays within the warm spectrum.

Advanced Techniques

Gradient Text

One of the most popular gradient applications. The technique uses background-clip to clip the gradient to the text shape, then makes the text colour transparent so the gradient shows through:

.gradient-text {
  background: linear-gradient(135deg, #7c6fff, #ff6fb0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* fallback */
}

/* Animated gradient text */
.animated-gradient-text {
  background: linear-gradient(90deg, #7c6fff, #ff6fb0, #7c6fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

Layered Gradients

The background property accepts multiple comma-separated values. This lets you layer gradients on top of each other, mixing types freely. The first listed is painted on top:

background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0)),  /* dark overlay */
  radial-gradient(circle at 80% 20%, rgba(124,111,255,0.5), transparent 50%),
  linear-gradient(135deg, #0a0a1a, #1a1a3e);

Repeating Gradients

The repeating variants tile the gradient pattern across the element. Combined with hard stops, they create stripe and checkerboard patterns entirely in CSS:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #7c6fff,
  #7c6fff 10px,
  #0a0a0f 10px,
  #0a0a0f 20px
);

/* Dotted pattern with radial */
background: radial-gradient(circle, #7c6fff 1px, transparent 1px);
background-size: 20px 20px;

Performance Considerations

CSS gradients are highly performant — they are rendered by the GPU and are far smaller in file size than equivalent image files. However a few things are worth knowing:

• Do not animate gradient colour stops directly — changing stop colours triggers a repaint. Instead, use a workaround like animating background-position on an oversized gradient (the shimmer effect above), or use @property to register a custom property for houdini-based gradient animation.
• Gradients beat images every time — a 100KB hero background image replaced by a CSS gradient saves the network request entirely and renders faster.
• Very complex gradients with many stops on very large elements (full viewport backgrounds) are generally fine on modern hardware but may cause slight repaint cost on older mobile devices.

Browser Support

All three gradient types and their repeating variants have universal support in every modern browser. No vendor prefixes are needed for gradients except -webkit-background-clip: text for the gradient text technique — this is still required for Safari.