Create a beautiful horizontal line with CSS only

Question

There is a tutorial here on how to do this in photoshop:

I am trying to do this with CSS only. The closer I could get is in this fiddle.

hr.fancy-line {      border: 0;      height: 1px;      background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));      background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));      background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));      background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(215,215,215,0.75), rgba(0,0,0,0));      box-shadow: 0px -2px 4px rgba(136,136,136,0.75); } 

<hr class="fancy-line"></hr> 

Doing a gradient on the shadow seems pretty tough. Any ideas how I could improve this?

Answer 1

I would use a radial-gradient to a pseudo-element instead of a box-shadow since it tapers off towards the edges nicer.

Position the radial-gradient above the <hr> so that it's cut in half. Then position another psuedo-element just below the <hr>with a the same color as the background and height just large enough to cover the rest of the gradient.

Updated JSFiddle

---

CSS

hr.fancy-line {      border: 0;      height: 1px;  } hr.fancy-line:before {     top: -0.5em;     height: 1em; } hr.fancy-line:after {     content:'';     height: 0.5em;     top: 1px; }  hr.fancy-line:before, hr.fancy-line:after {     content: '';     position: absolute;     width: 100%; }  hr.fancy-line, hr.fancy-line:before {     background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%); }  body, hr.fancy-line:after {     background: #f4f4f4; } 

Answer 2

Please have a look at https://codepen.io/ibrahimjabbari/pen/ozinB. This website provide 18 styles of horizontal lines. Some seem awesome.

Following is an example.

hr.style17 {     border-top: 1px solid #8c8b8b;     text-align: center; } hr.style17:after {     content: '§';     display: inline-block;     position: relative;     top: -14px;     padding: 0 10px;     background: #f0f0f0;     color: #8c8b8b;     font-size: 18px;     -webkit-transform: rotate(60deg);     -moz-transform: rotate(60deg);     transform: rotate(60deg); }