CSS或者svg canvas目前是否能实现iOS14应用列表顶部的渐变高斯模糊效果？

Question

iOS14顶部的高斯模糊半径从下到上是从0到一定数值的，如图所示：

而目前在CSS实现高斯模糊普遍采用的是filter:blur(<数值>)来实现高斯模糊。
这种高斯模糊只能实现单一模糊半径的情况。
如何实现在类似blur()参数内部嵌套gradient的想法得到变半径的模糊效果？
就如同iOS14应用列表顶部效果一样。

Answer 1

可以用 backdrop-filter + mask实现，先整体模糊，然后用遮罩实现渐变层

.wrap::before{
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    -webkit-mask: linear-gradient(#000 20%,transparent);
}

https://codepen.io/xboxyan/pe...

效果如下

Answer 2

本来还想能不能按阶梯来

结果不能

但是 stack overflow 搜到了标准答案：
https://stackoverflow.com/a/3...