Text becomes transparent at top

Question

I want to reach an effect like in the example, but use opacity instead blur. Imagine like text becomes transparent at top when you scrolling content.

body {
  margin: 0;
}

.wrapper {
  background: red;
}

.content {
  width: 400px;
  margin: auto;
  position: relative;
}

.content:after {
  content: '';
  position: fixed;
  width: 100%;
  height: 140px;
  display: block;
  top: 0;
  left: 0;
  -webkit-mask: linear-gradient(black, black, transparent);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 1000;
}

<div class="wrapper">
  
  <div class="content"><div>
 
Nam lacus libero, interdum euismod dui quis, sodales aliquam massa. Vivamus eget faucibus est, at tincidunt metus. Nulla eleifend aliquet purus. Nunc semper, lectus ut interdum pellentesque, velit ante feugiat arcu, non accumsan ex nulla a libero. Fusce vitae lectus iaculis, accumsan urna in, egestas mauris. Integer nec mi facilisis, fringilla eros sed, imperdiet purus. Ut in velit mi. Vivamus leo arcu, consectetur sed tellus commodo, dictum feugiat ex. Aliquam id arcu rutrum, euismod ligula at, vestibulum augue. Phasellus et nibh a nulla tempor sagittis. Nulla placerat magna quis tincidunt malesuada. Donec eleifend mollis eros, id vulputate est tempus a. Curabitur rutrum imperdiet turpis a accumsan. Ut malesuada varius mi, id varius purus malesuada at.
Nam lacus libero, interdum euismod dui quis, sodales aliquam massa. Vivamus eget faucibus est, at tincidunt metus. Nulla eleifend aliquet purus. Nunc semper, lectus ut interdum pellentesque, velit ante feugiat arcu, non accumsan ex nulla a libero. Fusce vitae lectus iaculis, accumsan urna in, egestas mauris. Integer nec mi facilisis, fringilla eros sed, imperdiet purus. Ut in velit mi. Vivamus leo arcu, consectetur sed tellus commodo, dictum feugiat ex. Aliquam id arcu rutrum, euismod ligula at, vestibulum augue. Phasellus et nibh a nulla tempor sagittis. Nulla placerat magna quis tincidunt malesuada. Donec eleifend mollis eros, id vulputate est tempus a. Curabitur rutrum imperdiet turpis a accumsan. Ut malesuada varius mi, id varius purus malesuada at.


</div>
  </div>
  
</div>

Answer 1

I found a solution!

I've used a mask-image property for the parent container, and now I can change bg to any color and image

body {
  margin: 0;
  background: red;
}

.wrapper {
  height: 100px;
  overflow: auto;
  -webkit-mask-image: linear-gradient(to top, #000, #000 50%, transparent);
    mask-image: linear-gradient(to top, #000, #000 50%, transparent);
}

.content {
  width: 400px;
  margin: auto;
  position: relative;
}

<div class="wrapper">
  
  <div class="content"><div>
 
Nam lacus libero, interdum euismod dui quis, sodales aliquam massa. Vivamus eget faucibus est, at tincidunt metus. Nulla eleifend aliquet purus. Nunc semper, lectus ut interdum pellentesque, velit ante feugiat arcu, non accumsan ex nulla a libero. Fusce vitae lectus iaculis, accumsan urna in, egestas mauris. Integer nec mi facilisis, fringilla eros sed, imperdiet purus. Ut in velit mi. Vivamus leo arcu, consectetur sed tellus commodo, dictum feugiat ex. Aliquam id arcu rutrum, euismod ligula at, vestibulum augue. Phasellus et nibh a nulla tempor sagittis. Nulla placerat magna quis tincidunt malesuada. Donec eleifend mollis eros, id vulputate est tempus a. Curabitur rutrum imperdiet turpis a accumsan. Ut malesuada varius mi, id varius purus malesuada at.
Nam lacus libero, interdum euismod dui quis, sodales aliquam massa. Vivamus eget faucibus est, at tincidunt metus. Nulla eleifend aliquet purus. Nunc semper, lectus ut interdum pellentesque, velit ante feugiat arcu, non accumsan ex nulla a libero. Fusce vitae lectus iaculis, accumsan urna in, egestas mauris. Integer nec mi facilisis, fringilla eros sed, imperdiet purus. Ut in velit mi. Vivamus leo arcu, consectetur sed tellus commodo, dictum feugiat ex. Aliquam id arcu rutrum, euismod ligula at, vestibulum augue. Phasellus et nibh a nulla tempor sagittis. Nulla placerat magna quis tincidunt malesuada. Donec eleifend mollis eros, id vulputate est tempus a. Curabitur rutrum imperdiet turpis a accumsan. Ut malesuada varius mi, id varius purus malesuada at.


</div>
  </div>
  
</div>