: 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

Posted in: #Browser #Color #Css #Gradient

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.
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.
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!

10.02% popularity Vote Up Vote Down

: How to Connect Bezier Curves in Inkscape? You can see there two bezier curves that I want to connect together. How can I do that? My current area with the peak consists of many small bezier

@Becky351

Posted in: #Inkscape #Vector

2 Comments

: What is the best Font with less empty Space (ultra fat) I search a good looking font which has small empty space, means the characters are full and nearly quadratic. Or in other words, if

@Becky351

Posted in: #Fonts

1 Comments

: Illustrator gradient tool won't change direction In Illustrator CS6, I can only get the gradient tool to add a horizontal gradient. I can not drag either of the end points around into a vertical

@Becky351

Posted in: #AdobeIllustrator #Gradient

5 Comments

: Creating negative company logos? Is it standard practice to create negative copies of a companies logo if they don't provide one. I'm asking as I'm creating a website which will have a companies

@Becky351

Posted in: #Logo #WebsiteDesign

2 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@Gail6891361

I notice if you render the element containing your gradient with the GPU using transform:translateZ(0), it render smoother, not perfect, but smoother.

10% popularity Vote Up Vote Down

@Twilah924

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.

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.

10% popularity Vote Up Vote Down

Feed

: 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

More posts by @Becky351

: How to Connect Bezier Curves in Inkscape? You can see there two bezier curves that I want to connect together. How can I do that? My current area with the peak consists of many small bezier

: What is the best Font with less empty Space (ultra fat) I search a good looking font which has small empty space, means the characters are full and nearly quadratic. Or in other words, if

: Illustrator gradient tool won't change direction In Illustrator CS6, I can only get the gradient tool to add a horizontal gradient. I can not drag either of the end points around into a vertical

: Creating negative company logos? Is it standard practice to create negative copies of a companies logo if they don't provide one. I'm asking as I'm creating a website which will have a companies

Login to post a comment!

2 Comments

Back to top | Use Dark Theme