Faded Horizontal Line using CSS Gradients

faded-horizontal-line-using-css-gradients.markdown

Faded Horizontal Line using CSS Gradients

A Pen by Kannan Kumar on CodePen.

License.

index.html

<br><br><br>
<div class="fade_rule"></div>  
<br><br><br>
<div class="fade_rule"></div>  
<br><br><br>
<div class="fade_rule"></div> 

style.css

.fade_rule {
        height: 1px;
        background-color: #E6E6E6;
        width: 66.0em;
        margin: 0 auto;
        background-image: linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -o-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -moz-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -webkit-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -ms-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
        background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, white), color-stop(0.5, gray), color-stop(0.98, white) );
}