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

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