Horizontal Rule with Gradient Fade Out of Ends

This is the CSS code to make a horizontal rule look more artistic with ends fading into the page.

hr {
    margin: 30px 0;
    height: 1px;
    border: none;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, black));
}

Example 1:

Using the CSS above, the hr tag is styled with gradient fade out on the ends making an attractive more way to separate sections.


Example 2:

If you want just a simple pure dark line separator, use this CSS.

hr {
    margin: 30px 0;
	height: 1px;
    border: none;
    background: gray;
}

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use