Advertisement


Gradient Banding in Chrome


Question

I've been trying use linear-gradient CSS to avoid using an image for a gradient but unfortunately it renders poorly in Chrome with visible banding.

I've created a codepen example to illustrate the problem.

http://codepen.io/chrism/pen/1

It is strange because it renders perfectly in safari, another webkit based browser.

The CSS code comes from compass images, so don't think it is a problem with my CSS

I found in the Chrome issue tracker this ticket, which I think relates to this issue.

http://code.google.com/p/chromium/issues/detail?id=41756

I was wondering if anyone had any workarounds for this which do not involved using images?

Thanks!

2012/07/16
1
7
7/16/2012 12:16:00 AM

Accepted Answer

The difference you're seeing is dithering. Safari dithers gradients, Chrome does not. I don't believe there's a way to enable or disable dithering for either.

Dither is an intentionally applied form of noise used to randomize quantization error, preventing large-scale patterns such as color banding in images.

http://en.wikipedia.org/wiki/Dither

Unfortunately, this means you may have to use images. If you do decide to use a repeating image for a gradient, make sure you leave enough width or height for the dithering to work. Usually dithering needs around 10-20 pixels to not look repeated.

2012/07/16
5
7/16/2012 7:29:00 AM