13

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.

clemens
  • 16,716
  • 11
  • 50
  • 65
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 3
    For those interested to compare it on different browsers, I have made a quick composition here: https://imgur.com/a/q8vl4 You can see that it works correctly in Win10 Chrome, but not in Win10 FF and Win10 Edge. This also appear on Ubuntu Chrome. – KarelG Nov 16 '17 at 13:04
  • Possible duplicate of [How can I prevent CSS gradient banding?](https://stackoverflow.com/questions/11666395/how-can-i-prevent-css-gradient-banding) – Sebastian Nov 16 '17 at 13:19
  • @Sebastian there's no actual answer in this antique QA – Denys Séguret Nov 16 '17 at 13:24

2 Answers2

2

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.

enter image description here

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.

enter image description here

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.

enter image description here enter image description here

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.

enter image description here

enter image description here

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.

Matthias Seifert
  • 2,033
  • 3
  • 29
  • 41
  • And using this knowledge can you find a similar looking gradient which works well ? How do you handle alpha ? – Denys Séguret Nov 16 '17 at 13:44
  • 2
    A grey gradient is always tricky, since the only switch you can adjust is brightness. Neither hue nor saturation affect the greyscale colors. But I think your exaple is **indeed** a rendering problem not a problem in color theory,as mentioned in a link in a comment above. I tested this in an image editor, and the gradient looks much more smooth. – Matthias Seifert Nov 16 '17 at 13:55
1

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:

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.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Red
  • 6,599
  • 9
  • 43
  • 85
  • Some browsers and OS solve the problem for some gradients – Denys Séguret Nov 16 '17 at 14:11
  • It only seems to happen in gradienst which go from dark to a light(er) color. If doing other gradienst, like purple to pink. The banding is almost invisible. – Red Nov 16 '17 at 14:24