So here's my issue, I'm trying to get this effect 

![enter image description here](https://i.stack.imgur.com/DLWK9.png)

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 

![enter image description here](https://i.stack.imgur.com/gVLno.png)

As you can see there are "layers", and its not exactly a "smooth" gradient. Here's a demo <http://jsfiddle.net/U4FU3/>

And ideas?