<div class="bigline"><hr class="hr1" /></div>
<div class="bigline"><div class="hr2"></div></div>

body{
  padding:20px 0;
}

.bigline {
  padding: 10px 0;
  margin: 10px 0;
  background: black;
}

.hr1 {
    border: 0;
    height: 1px;
    margin: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(150, 40, 27, 1) 20% 80%, rgba(255, 255, 255, 0) 100%);
}

.hr2 {
  border-top: solid 1px;
  border-image-slice: 1;
  border-image-source: 
    linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(150, 40, 27, 1) 20% 80%, rgba(255, 255, 255, 0) 100%);
}