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 >
  
  <div ><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>

CodePudding user response：

Just use a linear gradient as background, starting at your background color and ending transparent:

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;
  background: linear-gradient(red, transparent);
  pointer-events: none;
  z-index: 1000;
}

<div >
  
  <div ><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>

CodePudding user response：

You can use CSS liner-gradient. Please try this:

.content:after {
   ...other properties...
   background:(180deg, black(or any color you want), rgba(0,0,0,0))
}