color

CSS gradients: linear, radial, conic

Gradients are images, not colors. That distinction unlocks layering, repeating patterns, and creative effects — all without a single image file.

Linear gradients

A linear-gradient() creates a color transition along a straight line. The direction defaults to top-to-bottom, but can be any angle or keyword:

/* Top to bottom (default) */
.bg { background: linear-gradient(oklch(0.7 0.15 250), oklch(0.5 0.2 300)); }

/* Angled */
.bg { background: linear-gradient(135deg, oklch(0.8 0.1 150), oklch(0.4 0.15 280)); }

/* Multi-stop with explicit positions */
.bg {
  background: linear-gradient(
    to right,
    oklch(0.7 0.2 30) 0%,
    oklch(0.8 0.15 60) 40%,
    oklch(0.6 0.2 280) 100%
  );
}

Radial gradients

A radial-gradient() radiates from a center point outward. You control the shape (circle or ellipse), size, and position:

/* Circle from center */
.spotlight {
  background: radial-gradient(
    circle at 30% 40%,
    oklch(0.9 0.1 80),
    oklch(0.15 0.02 260)
  );
}

/* Sized ellipse */
.glow {
  background: radial-gradient(
    ellipse 200px 100px at center,
    oklch(0.7 0.2 300 / 0.5),
    oklch(0.7 0.2 300 / 0)
  );
}

Size keywords include closest-side, farthest-side, closest-corner, and farthest-corner (the default).

Conic gradients

A conic-gradient() sweeps color stops around a center point like a clock. It's ideal for pie charts, color wheels, and decorative patterns:

/* Pie chart — 70% complete */
.pie {
  background: conic-gradient(
    oklch(0.65 0.2 280) 0deg 252deg,
    oklch(0.3 0.02 260) 252deg 360deg
  );
  border-radius: 50%;
  aspect-ratio: 1;
}

/* Color wheel */
.wheel {
  background: conic-gradient(in oklch,
    oklch(0.7 0.2 0),
    oklch(0.7 0.2 60),
    oklch(0.7 0.2 120),
    oklch(0.7 0.2 180),
    oklch(0.7 0.2 240),
    oklch(0.7 0.2 300),
    oklch(0.7 0.2 360)
  );
}

Hard stops and repeating gradients

Place two color stops at the same position to create a hard edge with no transition. Combine with repeating-*-gradient() for patterns:

/* Hard stop — sharp divider */
.split {
  background: linear-gradient(
    to right,
    oklch(0.5 0.15 250) 50%,
    oklch(0.8 0.05 80) 50%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    oklch(0.9 0 0) 0px 10px,
    oklch(0.85 0.05 250) 10px 20px
  );
}

/* Repeating radial rings */
.rings {
  background: repeating-radial-gradient(
    circle,
    oklch(0.2 0 0) 0px 8px,
    oklch(0.3 0.05 280) 8px 16px
  );
}

Hard stops can show aliasing on non-retina screens. Add a tiny transition zone (e.g., 50% 50.5%) to smooth the edge.

Interpolation in oklch

By default, gradients interpolate in the sRGB color space, which can produce muddy midpoints (especially between complementary hues). The in oklch modifier fixes this:

/* sRGB interpolation — muddy brown midpoint */
.bad {
  background: linear-gradient(oklch(0.7 0.2 30), oklch(0.7 0.2 250));
}

/* oklch interpolation — vivid midpoint */
.good {
  background: linear-gradient(in oklch, oklch(0.7 0.2 30), oklch(0.7 0.2 250));
}

/* Control hue direction */
.longer {
  background: linear-gradient(
    in oklch longer hue,
    oklch(0.7 0.2 30),
    oklch(0.7 0.2 60)
  );
  /* Goes the long way around the hue wheel */
}

Always use in oklch for gradients between saturated colors. The perceptual uniformity prevents the dead zones that plague sRGB interpolation.

Layering multiple gradients

Since gradients are images, you can layer them with commas. Combine with transparency for complex effects without any image files:

.layered {
  background:
    radial-gradient(circle at 20% 50%, oklch(0.6 0.2 280 / 0.4), transparent 50%),
    radial-gradient(circle at 80% 50%, oklch(0.7 0.2 150 / 0.3), transparent 50%),
    linear-gradient(to bottom, oklch(0.1 0.02 260), oklch(0.15 0.01 250));
}