Reports

The answers so far, all have the same problem. They all propose a method where opacity of blur layer decreases, but not the blur itself.

Decreasing the opacity of the blur using a mask is not a perfect solution as it does not change the intensity of blur, but also exposes the unblurred content below the blur-layer resulting in a worse effect than the blur seen on devices like iOS.

This effect is known as "Progressive Blur". As of now, it can be done only by stacking layers with different blur values on top of each other and can be implemented with and without javascript. Using javascript would allow you to create the layers programmatically and utilize the time in configuring the effect instead. Here's the code:

const progressiveBlurYs = document.querySelectorAll(".progressive-blur-y");

const applyProgressiveBlur = (container) => {
  
  const config = {
    layers: 40,
    blurFactor: 0.5
  }
  
  const generateLayer = (index) => {
    const layer = document.createElement("div");
    layer.classList.add("progressive-blur-y-layer");
    layer.style.setProperty("--index", index);
    return layer;
  }
  const addLayers = () => {
    const layerGroup = document.createElement("div");
    layerGroup.classList.add("progressive-blur-y-layer-group");
    layerGroup.style.setProperty("--layers", config.layers);
    layerGroup.style.setProperty("--blur-factor", config.blurFactor);
    for (let i = 0; i < config.layers; i++) {
      const layer = generateLayer(i);
      layerGroup.appendChild(layer);
    }
    container.appendChild(layerGroup);
  }
  addLayers();
}

progressiveBlurYs.forEach(el => {
  applyProgressiveBlur(el);
})

.progressive-blur-y {
  border: 1px solid black;
  height: min-content;
  width: min-content;
  position: relative;
}

.stick {
  position: absolute;
  height: 100px;
  background: red;
  width: 8px;
  top: 0;
  right: 12px;
}

.content {
  padding: 8px;
  height: 300px;
  width: 300px;
  overflow-y: auto;
}

.progressive-blur-y-layer-group {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.progressive-blur-y-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  backdrop-filter: blur(
    calc(
      0.5px + 
      (
        sin(
          (var(--index) / var(--layers)) * 90deg
        ) * 
        var(--blur-factor) * 1px    
      )
    )
  );
  height: calc((var(--layers) - var(--index)) * 1px);
}

<div class="progressive-blur-y">
  <div class="content">
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Non, earum omnis nihil, atque labore fugit provident minus voluptas a laboriosam amet quidem minima molestias ipsum eos ea dicta quod corrupti.
  </p>
  </div>
</div>

There is also a similar method by a famous developer. It doesn't use JS at all, and does the same effect in less DOM elements. But, it is a bit difficult for a beginner to understand.

Here's the link: https://codepen.io/jh3y/pen/eYqyzmM

By default, it also has a brightness and contrast effect on it, which can be removed from the "config" button in top-right corner of output area. Just set the brightness and contrast sliders to 1.0

Happy coding.

79127937