CSS fade out horizontal rule / line styled div effect without images

Question

I\'m a big fan of minimal use of images and was wondering if anyone had a tactic (or if it\'s possible) to create this kind of thing with pure static CSS?

http://ww

Answer 1

This code create a normal hr but the difference will is it will have both end with fade effect(gradient black to blue)

hr{
border-top-color: black;
margin-bottom: 25px;
width: 80%;
}
hr::before{
display: block;
margin-left: -10%;
margin-top: -1px;
content:"";
background: linear-gradient(to left, black, blue);
width: 10%;
height: 1px;
}
hr::after{
display: block;
margin-left: 100%;
margin-top: -1px;
content:"";
background: linear-gradient(to right, black, blue);
width: 10%;
height: 1px;
}