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.
Hi Vladimir. The phenomenon you’re showing is called BANDING and there’s nothing you can do to render a gradient without it if you stick to render… a gradient. And the result depends on the browser and your screen, too. Let me elaborate:
What you show here is what HTML, CSS and the browser do: declaring and displaying a gradient, from one color to another. As the color model of your screen is 8 bits, when you have a monochromatic (or almost) gradient, there’s only 256 shades that can be used to…
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.
vincent
(Vincent Bidaux)
November 21, 2016, 10:22am
6
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
system
(system)
Closed
January 21, 2017, 7:22am
7
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.