How can I prevent CSS gradient banding?

user_1543179 0
Viewed 49328

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?

linear-gradients gradient css
8 Answers

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

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

Add a min-height.

#gradient {
  min-height: 100vh;
  background: linear-gradient(black, white);
}

you can also set background-repeat to no-repeat but shouldn't be necessary.

#gradient {
  min-height: 100vh;
  background: linear-gradient(black, white);
  background-repeat: no-repeat;
}
user_151806970
Related