Gradient Banding in Chrome


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.

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.

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


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.

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.

7/16/2012 7:29:00 AM