CSS Gradients: A Complete Guide to Linear, Radial, and Conic Gradients

CSS gradients have come a long way from the hacks we used to use (background-image: url(gradient.png)). Modern gradients are vector, resolution-independent, and more powerful than most developers realise. Here's everything you need to know.

Linear gradients

The most common type. A linear gradient blends between colours along a straight line.

/* Basic: top to bottom */
background: linear-gradient(red, blue);

/* Specific angle */
background: linear-gradient(45deg, red, blue);

/* Named directions */
background: linear-gradient(to right, red, blue);
background: linear-gradient(to bottom right, red, blue);

/* Multiple colour stops */
background: linear-gradient(to right, red, yellow 40%, green);

The direction can be:

An angle (45deg, 180deg) — 0deg is bottom-to-top, 90deg is left-to-right
A keyword direction (to right, to bottom, to top left)

Colour stops and positions

By default, colours are evenly distributed. You can control exact positions:

/* Stripe: sharp transition at 50% */
background: linear-gradient(
  to right,
  red 0%,
  red 50%,
  blue 50%,
  blue 100%
);

/* Or more concisely */
background: linear-gradient(to right, red 50%, blue 50%);

This is how you create sharp lines instead of smooth blends — useful for striped patterns and progress bars.

Radial gradients

Radial gradients radiate outward from a centre point.

/* Basic ellipse from centre */
background: radial-gradient(circle, yellow, orange, red);

/* Specific shape and size */
background: radial-gradient(circle at 30% 70%, yellow, transparent);

/* Ellipse (default) */
background: radial-gradient(ellipse 100% 50% at center, blue, white);

The at keyword controls the centre point. You can position it anywhere:

Keywords: at center, at top left, at 80% 20%
Lengths: at 100px 200px

The size can be:

Keywords: closest-side, farthest-side, closest-corner, farthest-corner (default)
Explicit: 200px 100px

Conic gradients

Conic gradients are the newest type — they rotate around a centre point like a colour wheel.

/* Basic pie chart */
background: conic-gradient(red 0deg, yellow 90deg, green 180deg, blue 270deg);

/* As percentages */
background: conic-gradient(
  #ff0000 0% 25%,
  #ff8800 25% 50%,
  #00aa00 50% 75%,
  #0000ff 75% 100%
);

/* Colour wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(90, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(270, 100%, 50%),
  hsl(360, 100%, 50%)
);

/* Start angle */
background: conic-gradient(from 45deg, red, blue, green, red);

Practical uses: pie charts, clock faces, loading indicators, colour wheel pickers.

Repeating gradients

All three types have a repeating variant:

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

/* Concentric rings */
background: repeating-radial-gradient(
  circle at center,
  transparent 0,
  transparent 20px,
  rgba(0,0,0,0.1) 20px,
  rgba(0,0,0,0.1) 21px
);

Layering gradients

You can stack multiple gradients using commas — they layer like backgrounds, with the first one on top:

background: 
  linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  linear-gradient(to right, #ff6b6b, #4ecdc4);

This is useful for adding a darkening overlay to a bright gradient, or creating complex multi-directional blends.

Gradients on text

Use background-clip: text to apply a gradient to text:

.gradient-text {
  background: linear-gradient(to right, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

The -webkit- prefix is still needed for Safari compatibility.

Accessibility: contrast on gradients

When placing text over a gradient background, the contrast ratio varies across the gradient. Always check the worst-case point — the lightest part of the background against your text colour (or darkest if your text is light). A tool like the Color Contrast Checker can test specific colour pairs — sample the lightest gradient point and check against your text colour.

Building gradients visually

Rather than writing gradient code by hand, you can prototype visually and then copy the CSS. The CSS Gradient Generator lets you adjust colours, stops, angle, and gradient type with sliders, then copies the ready-to-paste CSS. Useful for experimenting with colour combinations before committing to code.

Performance considerations

CSS gradients are rendered by the GPU and are extremely performant — far better than background images. However, complex gradients with many colour stops can affect repaint performance on low-end devices. As a rule: use the fewest colour stops needed for the intended effect, and avoid animating background properties — animate opacity or transform instead.

Browser support

Linear and radial gradients have supported without prefixes since IE10 (2012) and are universally available. Conic gradients have been in all major browsers since Chrome 69 (2018), Firefox 83, and Safari 12.1 — safe for all modern browsers but worth checking if you support IE11 or very old mobile browsers.

Gradients are one of those CSS features where understanding the underlying geometry pays off: once you know how angles, stops, and shapes work, complex patterns become straightforward. The more interesting visual effects — stripes, crosshatches, starburst backgrounds — are just variations on the same rules applied repeatedly.

推荐订阅源

DEV Community