Patterned gradients in modern browsers

Question

I get more and more complaints regarding badly rendered gradients (CSS, Canvas, and SVG).

As it highly depends on the browser and OS. I can't propose a global MCVE. So I'll focus on this simple CSS gradient which is badly rendered on Chrome/Ubuntu (vertical stripes):

body {
    background: linear-gradient(90deg, #111, #444);
}

Of course I'd be interested in a solution for this specific case. But I'd value more a general solution to get smooth monotonous gradients. Canvas or image based solutions are not acceptable as my gradients are in great number, dynamic, and usually partially transparent.

Answer 1

In many cases it is not neccessarily the fault of the OS or Browser, it is more the problem, that a lot of people don't know, how gradients work, and why they are patterned.

This is highly a problem of the luminosity of each color. In your example it is easy to find the luminosity of the gradient, since its a grayscaled gradient. So take a look at the picture below, where I put the darkest and lightest color of the gradiend side by side. You will notice, that they have a slightly different luminosity. If you make the black a bit lighter (or the gray a bit darker) the pattern will start to disappear.

Now to make it clearer, lets start with this simple gradient. (Don't worry, I will get to the pattern problem) Looks pretty dirty, doesn't it? Especially that grey in the middle of the gradient.

If we take a look at the RGB Color wheel, we see the problem. The gradient goes right through the middle of the wheel, which is a really washed out spot. We can avoid this, if we just start to add another stop in our gradient, such as green. If you compare it with the wheel on the right side, you cann see, that this avoids the part in the middle. The gradient below is much more colorful and does not look washed out.

But, now we have a pretty hard pattern in our gradient. This is, as already mentioned above, because we have a lot of different luminosities. So we don't actually want to go through the RGB spectrum with our gradients, we would more like to go through a color space, which is based on luminosity. And that is the HSL color space. Below you have a comparison of our initla red-to-cyan gradient between RGB and HSL, and you will notice, that there is much less of the banding in the HSL gradient. There is acutally a tool in the web, which I like to use for gradients. You can give a start and an end point (and steps between) and it generates a gradient in all the different color spaces, and mostly I pick the HSL one, because its the most natural one.

tl;dr The problem with these patterns is often a problem of the gradients luminosity, and if you try to change the color space, it will work out much better. Now I don't say, that ifferent Monitors, Browsers or Operating Systems don't have any influence on this, but the problem can be reduced with this trick pretty easily.

Answer 2

The lines you are seeing is called banding. Chrome in Win10 dithers gradients, FF does not. This differs per browser.

Some informative links related to this question:

• https://smerity.com/articles/2013/dithering.html
• Bug 627771 - Add dithering to gradient color transitions to address banding in 24-bit "truecolor"
• https://forum.webflow.com/t/managing-website-banding-on-retina-4k-screens/24343
• https://graphicdesign.stackexchange.com/questions/8426/gradient-banding-in-chrome

Without using an image as the gradient it is not possible to solve this as far as I know. Perhaps FireFox will dither gradients in a future version.