Compute Intermediate Gradient Stop Colors

Programmatic Gradient Stops

CSS gradients accept arbitrary colors at each stop, but choosing the exact middle color between two endpoints is annoying. color-mix() solves this:

:root {
  --start: #ef4444;
  --end:   #3b82f6;
}

.gradient {
  background: linear-gradient(
    90deg,
    var(--start) 0%,
    color-mix(in oklch, var(--start), var(--end) 33%) 33%,
    color-mix(in oklch, var(--start), var(--end) 66%) 66%,
    var(--end) 100%
  );
}

The two computed stops force the gradient to pass through specific midpoints. Without them, the browser interpolates linearly in the gradient's own color space (sRGB by default, unless you use the in oklch syntax inside the gradient).

Modern gradient interpolation alternative

CSS now supports a similar declaration directly inside the gradient:

.gradient {
  background: linear-gradient(in oklch 90deg, red, blue);
}

This produces the perceptual gradient natively. Use color-mix() stops when you need named intermediate values (for hover effects on each stop, for example) or when you want to mix colors from outside the gradient itself.

Pair with the gradient generator

For more complex gradients with conic shapes, multiple stops, or hint positions, our visual gradient generator generates the CSS for you and color-mix() can supply the stops.