<div class="awesome">
  <div class="awesome__content">
    awesome awesome awesome awesome 
    awesome awesome awesome awesome
    awesome awesome awesome awesome
    awesome awesome awesome awesome
  </div>
</div>

html, body {
  background: #1D1E22;
}

.awesome {
  background: #1D1E22;
  position: relative;
  width: 100%; // up to developer
    
  &__content {
    color: white;
    font-size: 30px;
    text-transform: uppercase;
  }
  
  &::before {
    pointer-events:none;
    user-select: none;
    content: '';
    display: block;
    background-image: linear-gradient(to right, rgba(#1D1E22, 1.0), rgba(#1D1E22, 0.7), rgba(#1D1E22, 0));
    position: absolute;
    height: 100%;
    width: 40%;
    left: 0;
  }
  
  &::after {
    pointer-events:none;
    user-select: none;
    content: '';
    display: block;
    background-image: linear-gradient(to right, rgba(#1D1E22, 0), rgba(#1D1E22, 0.7), rgba(#1D1E22, 1.0));
    position: absolute;
    height: 100%;
    width: 40%;
    right: 0;
    top:0;
  }
}