Managing website banding on retina 4k screens

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 compose the gradient. So if your gradient extends on more than 256 pixels, you’ll start to see bands of shades.

Photoshop does it too:

http://vincent.polenordstudio.fr/snap/e91bg.jpg

In Photoshop though, you can add dithering to minor the effects, but it’s still there:

http://vincent.polenordstudio.fr/snap/994gk.jpg

Manually, you need to add noise or other alteration, to get rid of the banding effect:

http://vincent.polenordstudio.fr/snap/abagz.jpg

In short: good gradients on the web aren’t a given. Very good gradients are a good designers’ touch :wink:

You can read the “Dithering is everything” section of a great post by Marc Edwards on Bjango: Gradients

So, in the end, you may have to resort to images for a very good difficult gradient, and not let the browser draw it for you. It is known that there is no magic solution, you have to use repeating images. In your case, gradient being diagonal isn’t the best case to use repeating images.

Some will say it’s better to do a black to transprent black gradient over a white background, but I tried it in Webflow and the result is the same.

I’m often using noise textures (http://www.transparenttextures.com/) over gradients, to add a bit of chaos to it.

http://vincent.polenordstudio.fr/snap/c5n19.jpg

http://vincent.polenordstudio.fr/snap/70wow.jpg

Sometimes wheh I struggle with a gradient, I go to my flickr account (where I know the pictures aren’t visibly compressed), I look for shades of blue in the sky, crop a section and work from there. The pictures are naturally dithered, there’s never a banding effect, it’s a time saver.

http://vincent.polenordstudio.fr/snap/p1ha7.jpg

Hope this help, sorry there’s no CSS solution for that. Check your art on various monitors and devices to spot the differences in banding.

PS: on this post, the banding is not obvious on some images, but it’s because the jpegs have been compressed… It’s really obvious when you have bigger images or less compressed images. Somehow, jpeg compression artifact tend to make banding less evident.

6 Likes