如何同时使用backdrop-filter与layer blur实现渐变模糊效果？

要解决背景模糊div边缘生硬的问题，核心思路是用伪元素叠加渐变遮罩——因为backdrop-filter无法直接与渐变背景结合实现边缘淡出，下面是具体实现方案：

1. 基础结构与背景模糊设置 #

先搭建基础HTML结构，给背景容器添加背景图，目标div使用backdrop-filter实现背景模糊，同时搭配半透明背景增强视觉效果：

<div class="bg-container">
  <div class="blur-card">
    <p>带渐变淡出边缘的模糊卡片</p>
  </div>
</div>

.bg-container {
  width: 100%;
  height: 400px;
  background: url('你的背景图地址') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

.blur-card {
  width: 100%;
  padding: 1.5rem;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  position: relative;
}

2. 添加渐变淡出边缘 #

给.blur-card添加伪元素，用线性渐变做遮罩，同时设置pointer-events: none避免遮挡交互：

.blur-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 以底部淡出为例，可根据需求调整渐变方向、颜色及过渡范围 */
  background: linear-gradient(to bottom, transparent 60%, rgba(255,255,255,0.8) 100%);
  pointer-events: none;
  border-radius: inherit;
}

如果需要多方向淡出（比如上下都有），可以叠加多层渐变：

background: 
  linear-gradient(to top, transparent 60%, rgba(255,255,255,0.8) 100%),
  linear-gradient(to bottom, transparent 60%, rgba(255,255,255,0.8) 100%);

3. 兼容性降级方案 #

针对不支持backdrop-filter的旧版浏览器，可用filter: blur()做降级：

.bg-container {
  overflow: hidden; /* 避免模糊区域溢出 */
}

.bg-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(8px);
  z-index: 0;
}

.blur-card {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.3);
}

为什么之前的尝试无效？ #

backdrop-filter作用于元素背后的区域，而元素自身的渐变背景是覆盖在模糊层之上的，两者不会叠加产生“渐变模糊”效果，必须用独立的伪元素作为遮罩层，才能实现边缘的渐变淡出。

内容的提问来源于stack exchange，提问作者Asaad Mahmood