Помогите реализовать градиент через css

body { 
  background: url('https://i.stack.imgur.com/7QFOe.png') no-repeat; 
  padding: 0; 
  margin: 0; 
} 
 
.overfade { 
  margin-top: 55px; 
  height: 50px; 
  width: 1280px; 
  border-left: 1px solid #000; 
  border-right: 1px solid #000; 
  background-image:  
    linear-gradient( 
      to right,  
      rgba(172, 172, 172, 0) 0%,  
      rgba(172, 172, 172, 1) 35%,  
      rgba(172, 172, 172, 1) 65%,  
      rgba(172, 172, 172, 0) 100%),  
    linear-gradient( 
      to right,  
      rgba(236, 234, 238, 1) 0%,  
      rgba(236, 234, 238, 1) 50%,  
      rgba(172, 172, 172, 0) 50%,  
      rgba(172, 172, 172, 0) 100%); 
  background-position: 0px 55%, 0px 0px; 
  background-repeat: no-repeat; 
  background-size: 100% 3px, 100% 55%; 
}

<div class="overfade"></div>

div { 
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,000000+89,000000+100&0+0,0.65+9,1+89,0+100 */ 
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%); 
  /* FF3.6-15 */ 
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%); 
  /* Chrome10-25,Safari5.1-6 */ 
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 9%, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 1) 89%, rgba(0, 0, 0, 0) 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000', GradientType=1); 
  /* IE6-9 */ 
  height: 300px; 
  width: 300px; 
}

<div></div>

div { 
  overflow: hidden; 
} 
 
div:before { 
  content: ""; 
  display: block; 
  height: 8px; 
  margin-top: -4px; 
  background: radial-gradient(ellipse at center, silver 0%, transparent 80%); 
}

<div></div>