I am attempting to create a linear gradient from top to the bottom like:

Gradient I want!

Unfortunately what I get is:

Gradient I get

The following is my HTML: 

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
        Hi
</body>
</html>

And my CSS:

body{
  background: linear-gradient(0deg, white, blue 80%) ;
}

If I do 90deg, instead of 0deg then I get this:

Gradient with 90deg

I need this gradient - but it should be rotated by 90deg i.e. from the top to the bottom instead of left to right. I'm curious why 0deg seems to give something similar to a repeated gradient.

I have used browsers, Firefox 21 and Chrome 27. I'd be grateful for any advice.

css
Edit
Report