title: How to make CSS gradient look smooth?
body: <p>I have a black background and want to add a block inside with simple CSS gradient from transparent to 0.7 white:</p>
  
  <pre><code>linear-gradient(to right, 
      hsla(0, 0%, 100%, 0), 
      hsla(0, 0%, 100%, 0.76) 14%, 
      hsla(0, 0%, 100%, 0.76)
  )
  </code></pre>
  
  <p>But this looks bad:</p>
  
  <p><a href="https://i.stack.imgur.com/SAuO4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SAuO4.png" alt="enter image description here"></a></p>
  
  <p>The only way I found is to add additional color stops, manually.</p>
  
  <pre><code>background: linear-gradient(
      to right,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0.05) 2%,
      hsla(0, 0%, 100%, 0.09) 3%,
      hsla(0, 0%, 100%, 0.2) 5%,
      hsla(0, 0%, 100%, 0.57) 11.5%,
      hsla(0, 0%, 100%, 0.69) 14%,
      hsla(0, 0%, 100%, 0.75) 16.5%,
      hsla(0, 0%, 100%, 0.76) 17.5%,
      hsla(0, 0%, 100%, 0.77)
  );
  </code></pre>
  
  <p>And it looks much better:</p>
  
  <p><a href="https://i.stack.imgur.com/fbXMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fbXMW.png" alt="The comparsion demonstration"></a></p>
  
  <p><a href="http://codepen.io/Grawl/pen/JbQwxj" rel="nofollow noreferrer">The comparsion demonstration on CodePen</a></p>
  
  <p>Is there an easier way to make CSS gradient smooth on color stops?</p>