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 to show banding, like so many raster graphics. I started testing my site on various screens recently, and on larger ones (24+ inches), the CSS linear gradient which constitutes my site's background shows very visible banding. As a provisional fix, I've overlaid the gradient with a small, repeating, transparent PNG image of noise, which helps a little. Is there any other way to fix this banding issue?

Solution 1

I know you won't like the sound of this, but the only real way right now to get a consistent cross-browser aesthetic in this case, is to use a repeating image.

If it's a simple linear gradient, then you only need it to be 1px wide and as high as the gradient, then make the background colour of the page as the final colour of the gradient so it runs smoothly. This will keep file size tiny.

If you want to reduce gradient bands in your image, use a PNG (not transparency) as I find these to be better suited than JPG's for this purpose.

In Adobe Fireworks, I would export this as a PNG-24.

Good luck.

http://codepen.io/anon/pen/JdEjWm

#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}

Solution 2

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.

Solution 3

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.

Solution 4

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);
}

Solution 5

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%
  );
}

View more solutions

Comments

[Christoph]

1) It's depending on the browser's rendering. 2) It's depending on your monitor.

[John Doe]

I've decided to use a solution based on @Michael Giovanni Pumo's answer: make a 1px high gradient in Photoshop, use blur, grain, and other dither methods to remove banding, and have it repeat-x.

[aruno]

Tip: Whatever technique you end up using make sure you're aware about the infamous iOS rendering 'quirk' where fading to transparent actually always fades to transparent black. betterprogramming.pub/… This longstanding issue can really make gradients look bad and any clever fix to correct banding that doesn't take this into account is a waste of time if you have to target iOS users

[Eugene Pankov]

I can confirm that overlaying gradient over background-color actually works better. Also try swapping background-color and gradient color because one of the options seems to always be looking better (webkit/blink)

[Jos van Weesel]

I never thought about overlapping 2 gradients with a transparent side on each side. I will definitely remember that for when I need it!

[hpm]

No, this method actually made the banding significantly worse.

[Brogan]

Tried the blur technique. The performance was extremely poor. One or two blur layers did improve the quality but at an extreme performance cost. 10 layers with 100px blur took my eeepc several minutes to display.