hr {
    border: 0;
    height: 1px;
    background: -moz-linear-gradient(left center, transparent, black, transparent);
    background: -webkit-gradient(linear, left center, right center,
                                 color-stop(0, transparent),
                                 color-stop(0.5, black),
                                 color-stop(1, transparent));
}

http://jsbin.com/acomi4/2/

A subtle gradient effect for <hr> tags. Works on Firefox and Webkit browsers (i.e. Chrome / Safari / Midori).

Gradient Horizontal Rule

css

CSS