title: CSS Background Linear Gradient from Top to Bottom
body: <p>I am attempting to create a linear gradient from top to the bottom like: </p>
  
  <p><img src="https://i.stack.imgur.com/PpOdY.png" alt="Gradient I want!"></p>
  
  <p>Unfortunately what I get is: </p>
  
  <p><img src="https://i.stack.imgur.com/0FRsE.png" alt="Gradient I get"></p>
  
  <p>The following is my HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test Page&lt;/title&gt;
      &lt;link rel="stylesheet" href="test.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
          Hi
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>body{
    background: linear-gradient(0deg, white, blue 80%) ;
  }
  </code></pre>
  
  <p>If I do <code>90deg</code>, instead of <code>0deg</code> then I get this: </p>
  
  <p><img src="https://i.stack.imgur.com/o7mg9.png" alt="Gradient with 90deg"></p>
  
  <p>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. </p>
  
  <p>I have used browsers, Firefox 21 and Chrome 27. I'd be grateful for any advice. </p>