如何为div下方模糊内容添加柔和边缘，实现渐变模糊效果？

API 探路者

2026-8-1

实现渐变模糊效果（柔化边缘）

要解决backdrop-filter模糊边缘生硬的问题，核心是给模糊层添加渐变遮罩，让模糊效果从清晰区域向透明区域平滑过渡。以下是两种可行的实现方案：

方案一：CSS `mask` 属性（现代浏览器推荐）

用伪元素单独承载模糊效果，再通过mask线性渐变控制模糊的可见范围，实现渐变消失的柔化边缘：

.your-div-class {
  position: relative;
  z-index: 10;
  /* 保留原有背景渐变 */
  background: linear-gradient(0deg, rgba(255,255,255,0) 10%, rgba(174,174,174,0) 15%, var(--bg-color) 85%);
}

.your-div-class::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1; /* 置于背景层下方，不干扰内容 */
  backdrop-filter: blur(10px);
  /* 渐变遮罩：模糊从底部完全可见，向上逐渐消失 */
  mask: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: linear-gradient(to top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

关键说明：

伪元素单独处理模糊，避免与原背景渐变冲突
调整mask渐变的百分比（如60%和100%），可灵活控制模糊过渡的范围和柔和程度

方案二：渐变背景叠加（兼容旧浏览器）

若需支持不兼容mask的浏览器，可通过渐变背景叠加模拟渐变模糊：

.your-div-class {
  position: relative;
  z-index: 10;
  background: linear-gradient(0deg, rgba(255,255,255,0) 10%, rgba(174,174,174,0) 15%, var(--bg-color) 85%);
}

.your-div-class::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(10px);
  /* 用渐变背景从上到下覆盖，让顶部模糊逐渐被遮挡 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg-color) 70%);
  mix-blend-mode: overlay;
}