fuzzy-horizontal-rule-in-css3-no-additional-markup.css

hr.fuzzy {
    background: -webkit-gradient(
                    linear,
                    left top,
                    left bottom,
                    color-stop(0%, #DBD7CC),
                    color-stop(100%, #F6F1E6)
                );
    background: -moz-gradient(
                    center top,
                    #DBD7CC 0%,
                    #F6F1E6 100%
                );
    background: -moz-linear-gradient(
                    center top,
                    #DBD7CC 0%,
                    #F6F1E6 100%
                );
    border: 0;
    clear: left;
    display: block;
    height: 8px;
    margin: 0;
    position: relative;
    width: 100%;
}
hr.fuzzy:before {
    background: -webkit-gradient(
        linear,
        left top,
        right bottom,
        color-stop(0%, rgba(248, 244, 234, 1)),
        color-stop(100%, rgba(248, 244, 234, .01))
    );
    background: -moz-gradient(
        center left,
        rgba(248, 244, 234, 1) 0%,
        rgba(248, 244, 234, .01) 100%
    );
    background: -moz-linear-gradient(
        center left,
        rgba(248, 244, 234, 1) 0%,
        rgba(248, 244, 234, .01) 100%
    );
    content: "";
    display: block;
    height: 8px;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}
hr.fuzzy:after {
    background: -webkit-gradient(
        linear,
        left top,
        right bottom,
        color-stop(0%, rgba(248, 244, 234, .01)),
        color-stop(100%, rgba(248, 244, 234, 1))
    );
    background: -moz-gradient(
        center left,
        rgba(248, 244, 234, .01) 0%,
        rgba(248, 244, 234, 1) 100%
    );
    background: -moz-linear-gradient(
        center left,
        rgba(248, 244, 234, .01) 0%,
        rgba(248, 244, 234, 1) 100%
    );
    content: "";
    display: block;
    height: 8px;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
}