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

@itbrian40

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

2 Likes

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