Create a beautiful horizontal line with CSS only

Question

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

I am trying t

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

---

so that it's cut in half. Then position another psuedo-element just below the

---

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