colors - Two different horizontal hr/separator in CSS -

the css code of separator this:

hr.separator {     border: 0;height: 2px;background: #000;     background-image: -webkit-linear-gradient(left, #aa0000, #000, #aa0000);     background-image: -moz-linear-gradient(left, #aa0000, #000, #aa0000);     background-image: -ms-linear-gradient(left, #aa0000, #000, #aa0000);     background-image: -o-lineargradient(left, #aa0000, #000, #aa0000);     width: 45%; } 

where markup:

<hr class="separator" /> 

i want add "hr" different color. (left, #fff, #000, #fff).

you can this:

hr.separator {      border: 0;height: 2px;background: #000;      width: 45%;  }  hr.separator.red{      background-image: -webkit-linear-gradient(left, #aa0000, #000, #aa0000);      background-image: -moz-linear-gradient(left, #aa0000, #000, #aa0000);      background-image: -ms-linear-gradient(left, #aa0000, #000, #aa0000);      background-image: -o-lineargradient(left, #aa0000, #000, #aa0000);    }  hr.separator.blue{      background-image: -webkit-linear-gradient(left, #0000aa, #000, #0000aa);      background-image: -moz-linear-gradient(left, #0000aa, #000, #0000aa);      background-image: -ms-linear-gradient(left, #0000aa, #000, #0000aa);      background-image: -o-lineargradient(left, #0000aa, #000, #0000aa);    }

<hr class="separator red" />  <hr class="separator blue" />