Ugly lines on a CSS gradient background

I wanted to create a css gradient for a background of a div.

HTML

<section id="library">
    <div id="listHeader"></div>
</section>

CSS

#library {
width: 600px;
margin: 0 auto;
}

#listHeader {
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#1A1B1B), to(#191919));
border-top: 1px solid rgba(51, 51, 51, 0.开发者_Python百科6);
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

This gives me the actual gradient I wanted to achieve, but it has some ugly lines all over.

This is the result I get. (Chrome 11, Mac OSX 10.6.7)

This also happens with other gradients. e.g.

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1D1D1D), to(#181818));

---

The issue is called 'banding' and it varies from monitor to monitor. Its not that bad on mine however I also think its because your color range is small for the dimensions of the area you want to fill. Try increasing the color range and play with the dimensions of the box to see the result.