CSS: A Shadowy Horizontal Rule

As you can see here on this blog, there are two weird looking horizontal lines (if you can find them), which by the way, were inspired by the line divider on one of WordPress' themes.

---

DEMO

Shadow on top

---

Shadow on bottom

---

---

This is a Blogger blog
So?
- Hmmm..
- ANYWAY..

• What I did, I went to Microsoft Gradient Maker.
• Then generated the gradient color. The elliptical > bottom center > farthest corner.
• Just put the starting color some dark grayish color, don't mind the end color, because you'll substitute that color with the word transparent. You can also tinker the start's and end's offset.
• After that, go back to the Blogger HTML editor, and create a selector class of that.
• Then, if you need to summon the customized horizontal line, include the previously declared class (in the CSS) in the <hr> tag.

Something like this.
This is the CSS. I named the class as shadowdown.
.shadowdown { border: 0; /* eliminate the border */ height: 10px; /* set the height */ /* ******************************************************************************************* */ /* This is the gradient I generated, I the put word transparent to substitute the ending color */ /* ******************************************************************************************* */ background-image: -ms-radial-gradient(center top, ellipse farthest-side, #888888 0%, transparent 70%); background-image: -moz-radial-gradient(center top, ellipse farthest-side, #888888 0%, transparent 70%); background-image: -o-radial-gradient(center top, ellipse farthest-side, #888888 0%, transparent 70%); background-image: -webkit-gradient(radial, center top, 0, center top, 487, color-stop(0, #888888), color-stop(0.7, transparent)); background-image: -webkit-radial-gradient(center top, ellipse farthest-side, #888888 0%, transparent 70%); background-image: radial-gradient(ellipse farthest-side at center top, #888888 0%, transparent 70%); }
As you can see above, the color stop offset is adjusted to be 70% (or 0.7).

Then, to summon the bottom-shadowed line, do this:

<hr class="shadowdown" />

That's pretty much it.

---

Link
Other cool styled horizontal line — <hr> tag at CSS-Tricks

---

Updated Dec 29, 2014