Poor gradient quality

Hey guys!

I added a gradient on a Hero header on http://margot-morin-desserrey.webflow.io/.

Do you know how I could get rid off the “stripes” that appear on the gradient?

Cheers <3

Here is my public share link: LINK
(how to access public share link)

Hey @laurentdesserre

I would check this article out since I sometimes encounter the same problem. :wink:

1 Like


I think it depends on your monitor.

Looking at it on my iMac 4k retina display and i can clearly see the lines that he is talking about both on the website and picture you provided. :wink:

That’s pretty normal, you want to cover a quite large distance with a monochromatic gardient: that’s only 256 color values to spread accross, say, 2000 or so pixels… So BANDING occurs.

Usually in Photoshop we use dither to fight this. You could try to add a grainy texture, it will fight the banding and you’ll get some nice density for your image.

www.subtletextures.com www.transparenttextures.com


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.