CSS Gradient Banding Issue?

Question

i have been trying to make a cool looking gradient in CSS, but i run into an unacceptable issue. The CSS gradient is banding, and it does not look good. I also do no want to use any images. Here is my code:

background-image: -moz-linear-gradient(top, #333, #000);
background-image: -ms-linear-gradient(top, #333, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000));
background-image: -webkit-linear-gradient(top, #333, #000);
background-image: -o-linear-gradient(top, #333, #000);
background-image: linear-gradient(top, #333, #000);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333', endColorstr='#000', GradientType=0);

What can i do to fix this?

Solution 1

This can occur if the difference between the start and end color is too minor to properly display the steps in-between.

Solution 2

For what it's worth, I cannot see the banding issue you describe on my monitor, but I believe I know what you are getting at.

Generally, browsers do not use dithering when creating gradients. This means that the steps between colors can be more noticeable. The only way around this is to make your gradient in software that does dither, such as Photoshop, and then set the background color to be an image. For such a high quality image though, the size will be very large, and probably isn't worth it. In addition, the size becomes fixed, and not dynamic as your CSS is.

See also: http://bjango.com/articles/gradients/

Comments

[Hunter Mitchell]

hey, look at this question...i found it...how do i do this, but in Hex color codes instead of RGBA? stackoverflow.com/questions/7233649/…

[Sven]

Just a quick note as I stumbled across this: It doesn't matter if you use RGBA, HEX, HSLA or any other color mode, the banding will still occur because it has nothing to do with the color mode. Banding will appear if the difference between the start and end color is too minor to properly display the steps in-between.

[Space Devin]

Anyone care to clear up what "more sophisticated gradient parameters, namely rgba colors, with alpha channel" really means? Since that doesn't seem to really do anything? I noticed that I get much better gradients in FF than webkit: jsfiddle.net/G9mg2/2

[rich remer]

You should be able to mitigate the problem by adding an additional gradient (or two) with similar colors, but with alpha channels. Using different steppings than the primary gradient will cause the blend to be more subtle. For linear gradient, you can maximize this blending by using an angled offset for the alpha gradient.

[Sam]

This is not the right answer. Depending on your browser the gradient may or may not look smooth. For example, Chrome has an outstanding bug (4 years old) code.google.com/p/chromium/issues/detail?id=41756

[Sam]

Also in Chrome if you use a canvas and render a gradient with fillRect it looks much smoother.