Gradients

A gradient is a generated image. Use anywhere an image fits — background-image, border-image, mask-image.

Linear Gradient

background: linear-gradient(to bottom, white, #f4f4f5);
background: linear-gradient(45deg, tomato, gold);
background: linear-gradient(to right, red, orange 30%, yellow);

Direction first (or angle in degrees), then color stops. Each stop can have an optional position (% or length).

Radial Gradient

A gradient that radiates from a point:

background: radial-gradient(circle at top right, gold, transparent 60%);
background: radial-gradient(ellipse, white, #f4f4f5);

circle or ellipse (default), an optional at <position>, then the stops.

Conic Gradient

Sweeps around a point — perfect for pie charts and color wheels:

.pie {
  background: conic-gradient(
    tomato 0 30%,
    gold 30% 60%,
    skyblue 60% 100%
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Repeating Gradients

repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient — for stripes and patterns:

background: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #fafafa 10px,
  #fafafa 20px
);

Hard Stops

To make a sharp color change instead of a blend, place two stops at the same position:

background: linear-gradient(
  to right,
  red 50%,
  blue 50%
);

Half red, half blue, no fade.

Modern Interpolation

You can request OKLCH interpolation for smoother color mixing:

background: linear-gradient(in oklch, blue, red);

Avoids the muddy middle (gray) that RGB interpolation produces.

Up Next

Borders.