CSS gradient generator

The three gradient types

Why so many gradients look muddy

Browsers interpolate between your colours in sRGB by default, and sRGB has a dead zone. Blend blue into yellow and the midpoint comes out grey rather than green.

Three ways round it, in increasing order of effort:

Add a midpoint stop. Pick the colour you actually want in the middle and place it at 50%. Works everywhere, no new syntax.

Use similar hues. Gradients between neighbouring colours on the wheel never go muddy, because there is no dead zone to cross. This is why blue-to-purple looks good with no effort at all.

Interpolate in a better colour space. Modern CSS lets you say linear-gradient(in oklch, blue, yellow), and OKLCH keeps perceived lightness constant across the blend. Support is good in current browsers but not universal, so keep a plain version as the preceding declaration.

.hero {
  background: linear-gradient(135deg, #3B4FE4, #E8A33D);
  background: linear-gradient(in oklch 135deg, #3B4FE4, #E8A33D);
}

Hard stops and stripes

Put two stops at the same position and the transition becomes a hard edge. That single trick covers stripes, progress bars, split backgrounds and sectioned buttons — no images, no extra elements.

.striped {
  background: repeating-linear-gradient(
    45deg,
    #3B4FE4 0 10px,
    #2A3ABF 10px 20px
  );
}

Tick Repeating above and set two stops close together to build this visually.

Gradient text

Tick Apply to text and the gradient is clipped to the glyphs instead of filling the box. It needs three declarations together, and the -webkit- prefix is still required even in browsers that support the standard property.

Performance and accessibility

Gradients are cheap to paint and cost nothing to download, which makes them strictly better than a background image for the same effect. The exception is animating one: background is not a GPU-accelerated property, so animating gradient stops repaints every frame. Animate background-position on an oversized gradient instead, or animate opacity on a stacked layer.

For text over a gradient, check contrast at both ends. A headline that passes on the dark end of a gradient often fails on the light end, and automated checkers only sample one point. Test the worst case, not the average.

Questions about this generator

Related tools

Learn the why, not just the how

Longer reading on formatting, indentation and minification.