What causes gradient banding and how do you fix it?

Question

Recently I was coding some linear and radial gradients, and I noticed they show up great in Chrome, but have banding in Safari. From the many other questions related to this topic, it seems that the opposite can be true(looks good in Safari but bands in Chrome), and generally there's some inconsistency between different browsers when it comes to rendering gradients.

My question is, what causes gradient banding? Why does it happen in general(I notice it can happen in digital and print designs), what causes that banding to happen in some browsers, and what are the best-practice solutions to ensure gradients appear correctly cross-browser?

Answer 1

CSS gradients are implemented and rendered differently in browsers engine. The more complex your gradient, the more banding, the more differences you will have between browsers. There is no perfect cross-browser aesthetic solution.

// Complex banding that will produce banding
background-image: linear-gradient(-155deg, #FFF 0%, #444 20%, #666 40%, #888 60%, #999 80%, #000 100%);

Some solutions:

• Use a repeating image : a image of 1px heigth.
• Simplify gradient: using minimal gradient steps

background-image: linear-gradient(-155deg, #FFF, #000 100%);

• Using a library like tailwindcss https://tailwindcss.com/docs/gradient-color-stops to manage gradient.
• Blur background to mask banding

filter: blur(8px);
background-image: linear-gradient(-155deg, #FFF 0%, #444 20%, #666 40%, #888 60%, #999 80%, #000 100%);

EDIT:

The first curve is the generated curve with only two colours. Second, with five colours. The browser will create smaller curves between each point. If the colours aren't chosen correctly, the gradient can be too linear and cause banding.