title: Horizontal line with fade out effect
body: <p>I'm trying to replace bootstrap <code>&lt;hr /&gt;</code> with a gradient looking line like this one.</p>
  
  <p><img src="https://i.stack.imgur.com/uikTT.png" alt="enter image description here"></p>
  
  <p>So far I've tried used this mixin: </p>
  
  <pre><code>.horizontal-gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(left, @startColor, @endColor);
    background-image: -moz-linear-gradient(left, @startColor, @endColor);
    background-image: -ms-linear-gradient(left, @startColor, @endColor);
    background-image: -o-linear-gradient(left, @startColor, @endColor);
  }
  </code></pre>
  
  <p>but... it didn't work.</p>
  
  <p><strong>Edit</strong> </p>
  
  <p>I decided to create a separate class (<code>&lt;hr/&gt;</code> might be useful the way it is in the future). But, I still can't get this to work... </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.post-title-line {
    background-color: #403a41;
    background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
    width: 100%;
    height: 1px;
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="post-title-line"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>