CSS gradient comes down as layers - html

Question

So here's my issue, I'm trying to get this effect
So I'd use this CSS
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #5FC7F4),
color-stop(1, #069ADA)
);
background-image: -o-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -moz-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -webkit-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -ms-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: linear-gradient(to bottom, #5FC7F4 0%, #069ADA 100%);
Now what happens is when I use that, I get
As you can see there are "layers", and its not exactly a "smooth" gradient. Here's a demo http://jsfiddle.net/U4FU3/
And ideas?

Answer 1

Nothing's wrong with your gradient - you just need to set the height like so:
html, body {
height: 100%;
}

Answer 2

#gradient {
height: 200px;
background: -webkit-linear-gradient(#5FC7F4, #069ADA ); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5FC7F4, #069ADA ); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5FC7F4, #069ADA ); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5FC7F4, #069ADA); /* Standard syntax (must be last) */
}
This seems to work fine
Check out this example:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear