How can I prevent CSS gradient banding?

Question

I started using CSS gradients, rather than actual images, for two reasons: first, the CSS gradient definitely loads faster than an image, and second, they aren\'t supposed t

Answer 1

There's not really any method to remove the banding. CSS gradients are at the mercy of the various rendering engines of the browsers. Some browsers simply render better than others. The best you can do is short areas to cover and larger color ranges to increase the gradient steps.... Then wait for browser rending to improve.

Answer 2

I made a "scatter.png" to put with my gradient. Like this:

1. Open gimp
2. 100x100 image
3. Add alpha channel
4. Filters -> Noise -> Hurl... Accept defaults
5. Set opactity to 5%

6. Save and then add to gradient.

   background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);
   

It's a subtle effect on a subtle effect.

Answer 3

You can yield slightly better results by making your gradient go from the first colour to transparent, with a background-color underneath for your second colour. I'd also recommend playing around with background-size for large gradients that stretch across the screen, so the gradient doesn't actually fill the whole screen.

Answer 4

I know this is a bit very late, but I discovered a trick that works. For anyone having that rough edge at meet point of the colors. This removes it.

.gradient {
  background: linear-gradient(
    173deg,
    rgba(0, 132, 255, 1) 50%,
    rgba(255, 255, 255, 1) 50.5%
  );
}

Answer 5

For a pure CSS answer you can use a blur filter to add blur to the css gradient and alleviate the banding. It can mean some rebuilding of the hierarchy to not blur the content and you need to hide the overflow to get crisp edges. Works really good on an animating background where the banding issue can be especially dire.

.blur{
  overflow:hidden;
  filter: blur(8px);
}

Answer 6

I know this issue is long solved, but for others experiencing banding and looking for a solution, a very easy fix for me was just simplifying the colours I included in my gradient. For example:

This gradient produces banding:

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

This gradient does not, and looks much the same:

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);