合并面具与背景

.img {
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-size: cover;
  background-position: center;
  width: 500px;
  height: 300px;
  position: relative;
}

.img:before {
  content: "";
  position: absolute;
  height: 200px;
  inset: auto 0 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#0000, #000 90%);
  background: linear-gradient(#0000, #0005 70%,#000);
  backdrop-filter: blur(10px);
}

个字符

你可以考虑将多个元素相互叠加。第一层是最高的，模糊程度最低，这样它的模糊与原始图像的模糊程度就不那么明显了。然后我们可以在上面叠加更多模糊程度增加但较短的元素，这样模糊程度较强的元素就会沿着图像向下。我们将这些层与mask“混合”在一起。
当然，调整参数的味道：

.img {
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-size: cover;
  background-position: center;
  width: 500px;
  height: 300px;
  position: relative;
}

.img .shadow {
  content: "";
  height: calc(150px * var(--n) / 4);
  bottom: 0;
  width: 100%;
  position: absolute;
  pointer-events: none;
  left: 0;
  background: linear-gradient( 360deg, rgb(0 0 0 / 75%) 0%, rgba(255, 255, 255, 0) 150px);
  -webkit-mask: linear-gradient(0deg, #000, #0000);
  mask: linear-gradient(0deg, #000, #0000);
  backdrop-filter: blur(calc(10px / var(--n)));
}

.shadow:nth-child(1) {
  --n: 4;
}

.shadow:nth-child(2) {
  --n: 3;
}

.shadow:nth-child(3) {
  --n: 2;
}

.shadow:nth-child(4) {
  --n: 1;
}

个字符

您可以使用mask（在代码片段中，要删除模糊滤镜，请将鼠标悬停在图像上）：

img {
  width: 800px;
  height: 450px;
  position: absolute;
  background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg);
  background-repeat: no-repeat;
}

.linear-filter-top-to-bottom {
  -webkit-mask: -webkit-linear-gradient(black, transparent 100%, black);
  -webkit-mask: linear-gradient(black, transparent 100%, black);
  -webkit-filter: blur(24px);
  mask: url("#linear-mask");
  filter: url("#filter");
}
.linear-filter-top-to-bottom:hover {
  mask: none;
  filter: none;
  -webkit-mask: none;
  -webkit-filter: none;
}
.filter-border {
  width: 800px;
  height: 450px;
}

.container {
  width: 800px;
  height: 450px;
}

个字符