Apply linear gradient on <hr>

Question

I want an hr that contains 50% of the page.

hr {
    background-color: #E0DFDF;
    background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
    background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
    background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
    background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);

    border: none;
    margin: 1.5em auto;
    height: 1px;
    width: 50%;
}

Answer 1

1. background-color: @border; is invalid CSS. I guess you are porting some code from preprocessor (e.g. SASS), please fix it.

2. Your syntax is wrong:

   /* incorrect */
   -webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
                          ^^
   /* correct */
   -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
   

Here's a demo:

hr {
  background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  border: none;
  margin: 1.5em auto;
  height: 1px;
  width: 50%;
}

<hr>