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