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!
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.
Attribution
Source : Link , Question Author : Chris , Answer Author : Marc Edwards