Two tone hr

body {
  background-color: #f7f6f4;
}
hr {
  height: 3px;
  border: 0;
  background-color: #c3c3c3;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#f7f6f4), to(#f7f6f4), color-stop(50%, #fff));
  background-image: -webkit-linear-gradient(left, #f7f6f4, #fff, #f7f6f4);
  background-image: -moz-linear-gradient(left, #f7f6f4, #fff, #f7f6f4);
  background-image: -ms-linear-gradient(left, #f7f6f4, #fff, #f7f6f4);
  background-image: -o-linear-gradient(left, #f7f6f4, #fff, #f7f6f4);
}
hr::after {
  content: '';
  display: block;
  height: 1px;
  background-color: #f7f6f4;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#f7f6f4), to(#f7f6f4), color-stop(50%, #c3c3c3));
  background-image: -webkit-linear-gradient(left, #f7f6f4, #c3c3c3, #f7f6f4);
  background-image: -moz-linear-gradient(left, #f7f6f4, #c3c3c3, #f7f6f4);
  background-image: -ms-linear-gradient(left, #f7f6f4, #c3c3c3, #f7f6f4);
  background-image: -o-linear-gradient(left, #f7f6f4, #c3c3c3, #f7f6f4);
}