title: CSS3 White to Transparent Gradient
body: <p>I'm using CSS3 and RGBA to create a white-to-transparent gradient:</p>
  
  <pre class="lang-css prettyprint-override"><code>div {
      background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
      background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
      background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
      background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
      background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
      background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
      background-repeat: repeat-x;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
      padding: 2rem 0;
  }
  </code></pre>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/alecrust/fYz45/" rel="noreferrer">http://jsfiddle.net/alecrust/fYz45/</a></p>
  
  <p>However as you'll notice, the gradient is dark in the middle. I'm getting this:</p>
  
  <p><img src="https://i.stack.imgur.com/awPyQ.png" alt="Getting"></p>
  
  <p>And I'm expecting this:</p>
  
  <p><img src="https://i.stack.imgur.com/4XTap.png" alt="Expecting"></p>
  
  <p>How can I rectify?</p>