How can I prevent CSS gradient banding?

by

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

More Related Contents:

  1. Gradient text color
  2. SVG gradient using CSS
  3. Blocky gradient effect in CSS3
  4. CSS gradient checkerboard pattern
  5. Using percentage values with background-position on a linear-gradient
  6. How do I combine a background-image and CSS3 gradient on the same element?
  7. Use CSS3 transitions with gradient backgrounds
  8. How to remove the stripes that appears when using linear gradient property [duplicate]
  9. Border Gradient with Border Radius
  10. Gradient borders
  11. CSS3 Transparency + Gradient
  12. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  13. CSS3 cross browser linear gradient
  14. Gradients in Internet Explorer 9
  15. How does border-image work with linear-gradient?
  16. Can you add noise to a CSS3 gradient?
  17. background image, linear gradient jagged edged result needs to be smooth edged
  18. Why does the linear-gradient disappear when I make an element position:absolute?
  19. Using CSS, can you apply a gradient mask to fade to the background over text?
  20. css text gradient
  21. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  22. How to add animated gradient to an svg path?
  23. Fade image to transparent like a gradient
  24. Fixed gradient background with css
  25. How do I hide an element when printing a web page?
  26. How can I force browsers to print background images in CSS?
  27. How to change an input button image using CSS
  28. Relationship between !important and CSS specificity
  29. What does the double colon (::) mean in CSS?
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment