title: Create a beautiful horizontal line with CSS only
body: <p>There is a tutorial <a href="https://graphicdesign.stackexchange.com/questions/1686/how-would-i-recreate-this-horizontal-line-in-photoshop">here</a> on how to do this in photoshop:</p>
  
  <p><img src="https://i.stack.imgur.com/0uzlh.gif" alt="enter image description here"></p>
  
  <p>I am trying to do this with CSS only. The closer I could get is in this <a href="http://jsfiddle.net/Sydney_o9/yLbtC/4/" rel="nofollow noreferrer">fiddle</a>. 
  </p>
  
  <pre class="lang-css prettyprint-override"><code>hr.fancy-line { 
      border: 0; 
      height: 1px; 
      background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
      background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
      background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
      background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0)); 
      box-shadow: 0px -2px 4px rgba(136,136,136,0.75);
  }
  </code></pre>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;hr class="fancy-line"&gt;&lt;/hr&gt;
  </code></pre>
  
  <p>Doing a gradient on the shadow seems pretty tough.
  Any ideas how I could improve this?</p>