I have been stuck on this problem for a few hours, and since I am about to get off work, I decided to ask for some helps.

I have a horizontal rule and created a line that fades at both ends.

Code:
hr {
  height: 1px;
  margin: 50px 0;
  background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,0)), color-stop(0.5, #AEAEAE), to(rgba(0,0,0,0)));
  background: -webkit-linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
  background: -moz-linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
  background: -o-linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
  background: linear-gradient(left, rgba(0,0,0,0), #AEAEAE, rgba(0,0,0,0));
  border: 0;
  position: relative;
  top:105px;
}
Then I have a Radial Gradient coming from the bottom of the HR.

Code:
hr:after { 
  display: block; 
  content:'';
  height: 30px;

  background-image: -webkit-gradient(radial, 0% 0%, 0, 50% 0%, 116, color-stop(0%, #151515), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-radial-gradient(center top, farthest-side, #151515 0%, rgba(255, 255, 255, 0) 100%);
  background-image: radial-gradient(farthest-side at center top, #151515 0%, rgba(255, 255, 255, 0) 100%);
}
It works great, however for my design I want the graident to on the top, facing upward. Instead of on the bottom of the line and facing down. (Sorry if this sucks as explaining as to what I want). So basically rotated 180 degrees

Here is the jsfiddle.

Any ideas?