Horizontal line with fade out effect

Question

I'm trying to replace bootstrap <hr /> with a gradient looking line like this one.

So far I've tried used this mixin:

.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);
}

but... it didn't work.

Edit

I decided to create a separate class (<hr/> might be useful the way it is in the future). But, I still can't get this to work...

.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;
}

<div class="post-title-line"></div>

Answer 1

Reason:

Your problem is not with the mixin but the choice of colors. rgba(0,0,0,0) is equivalent to transparent but you already have a background-color set within the selector. So effectively your gradient becomes from #403a41 to #403a41 which just results in a solid line.

You can verify this behavior by changing the background-color to something else within your selector. In the below snippet, I have set it to red so that you can see what I mean.

.post-title-line {
  background-color: red;
  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;
}

<div class="post-title-line"></div>

---

Solution:

The ideal solution would be to modify the mixin code like given below and just use the background property. Newer browsers which recognize the gradients will overwrite the first property (solid color) whereas browsers that don't recognize gradients would continue to use it.

.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background: @startColor;
  background: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(left, @startColor, @endColor);
  background: -moz-linear-gradient(left, @startColor, @endColor);
  background: -ms-linear-gradient(left, @startColor, @endColor);
  background: -o-linear-gradient(left, @startColor, @endColor);
}

If you can't alter the mixin, you could either override the background-color (to transparent) after the mixin is invoked or set the endColor color as rgba(255,255,255,1).

I would recommend the former because rgba(255,255,255,1) is equivalent to white and might not be suitable when your page background is not white whereas transparent and rgba(0,0,0,0) are the same as per W3C spec.

Note that this solution will have an impact on the fallback for old browsers that do not support gradients. They will see nothing instead of a solid line.

.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;
  background-color: transparent; /* add this line after the mixin call */
}

<div class="post-title-line"></div>