{
  "id": 19964878,
  "title": "Why your CSS gradient looks muddy in the middle (and the one-line fix)",
  "url": "https://urgent.news/2026/11/14/why-your-css-gradient-looks-muddy-in-the-middle-and-the-one-line-fix",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-14T10:42:47.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/gotoolsonline/why-your-css-gradient-looks-muddy-in-the-middle-and-the-one-line-fix-5e2f"
  },
  "original_language": "en",
  "account": "Many people have experienced the issue of their CSS gradients appearing muddy in the middle. This occurs when using the `linear-gradient()` function with colors such as blue and yellow, resulting in a dull grey band. The issue is not with the colors themselves, but with the way browsers blend the gradient stops in the default sRGB colour space. Halfway between a saturated blue and a saturated yellow in sRGB, the colour becomes a desaturated grey.\n\nThe solution to this problem is to interpolate the colours in a colour space that provides perceptually even blending, such as OKLab or OKLCH. Modern CSS allows developers to choose the colour space for gradient blending. For example, the following code blends the gradient in OKLab, resulting in a perceptually even gradient with no grey band:\n\n`background: linear-gradient(in oklab 90deg, #1e40ff, #ffd400);`\n\nAlternatively, OKLCH can also be used, which interpolates the hue as an angle, resulting in very vivid gradients:\n\n`background: linear-gradient(in oklch 90deg, #1e40ff, #ffd400);`\n\nThe OKLab colour space is recommended for most UI gradients as it keeps lightness changing smoothly. However, OKLCH can be used for more vivid hero backgrounds, although it might be too intense for buttons. It's important to note that the `in` colorspace syntax is supported in current versions of Chrome, Edge, Safari, and Firefox. For older browsers, the plain sRGB line should be included first to ensure a fallback.\n\nIn addition to using OKLab or OKLCH, there are other small tips to improve gradient gradients. Adding a hand-picked middle stop, such as a green between blue and yellow, can also eliminate the grey band. Conic gradients are ideal for pie-chart style rings and colour wheels, while repeating-linear-gradient() can create stripes without the need for images. It's also worth noting that transparent stops, while useful, can darken edges due to sRGB blending rules. Using the same colour at 0 alpha (e.g. `rgb(30 64 255 / 0)`) can fade cleanly in these cases.",
  "summary": "If you've ever written linear-gradient(blue, yellow) and got a dull grey-ish band in the middle, the colours aren't wrong; the interpolation is. By default browsers blend gradient stops in sRGB, which isn't perceptually even. Halfway between a saturated blue and a saturated yellow in sRGB is a desaturated grey. The fix: interpolate in OKLab or OKLCH Modern CSS lets you choose the colour space the…",
  "key_points": [
    "CSS gradients appear muddy in middle due to sRGB color space blending",
    "Interpolate colors in perceptually even color spaces like OKLab or OKLCH",
    "OKLab recommended for most UI gradients, OKLCH for vivid backgrounds"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}