CSS Gradient Banding Issue?

Question

i have been trying to make a cool looking gradient in CSS, but i run into an unacceptable issue. The CSS gradient is banding, and it does not look good. I also do no want to use any images. Here is my code:

background-image: -moz-linear-gradient(top, #333, #000);
background-image: -ms-linear-gradient(top, #333, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#000));
background-image: -webkit-linear-gradient(top, #333, #000);
background-image: -o-linear-gradient(top, #333, #000);
background-image: linear-gradient(top, #333, #000);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333', endColorstr='#000', GradientType=0);

What can i do to fix this?

Answer 1

This can occur if the difference between the start and end color is too minor to properly display the steps in-between.