如何在React或CSS中实现卡片的线性模糊效果

核心实现思路 #

该效果不需要复杂的第三方库，纯CSS即可实现，React项目中可直接复用：

• 用模糊属性实现基础模糊效果
• 用CSS渐变遮罩控制模糊的显示范围，实现线性过渡的模糊效果
• 分层设计保证卡片内容可正常交互

完整代码实现 #

HTML结构 #

<div class="card-wrapper">
  <!-- 卡片内容层：正常展示内容，支持交互 -->
  <div class="card-content">
    <h2>示例卡片</h2>
    <p>这是卡片的普通内容，不会被模糊影响，支持正常点击、选中等操作</p>
    <button>点击按钮</button>
  </div>
  <!-- 模糊遮罩层：仅负责实现线性模糊效果 -->
  <div class="blur-layer"></div>
</div>

CSS样式 #

.card-wrapper {
  position: relative;
  width: 350px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.card-content {
  padding: 24px;
}

.blur-layer {
  position: absolute;
  inset: 0;
  /* 背景模糊，如果你需要模糊卡片本身的内容，替换为 filter: blur(10px) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 线性渐变遮罩：黑色区域显示模糊，透明区域隐藏模糊，这里是从顶部往下40%开始模糊逐渐消失 */
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  /* 让点击事件穿透到下方内容层 */
  pointer-events: none;
}

自定义调整方法 #

• 调整blur()内的数值，可修改模糊的强弱程度
• 修改linear-gradient的参数，可调整模糊的方向和过渡区间：
  • 把to bottom改成to top/to left/to right可改变模糊的渐变方向
  • 调整颜色节点的百分比，可修改模糊过渡的起始位置
• 如果需要兼容低版本浏览器，可引入backdrop-filter的polyfill做降级处理

React项目适配 #

直接将上述CSS写入你的样式文件即可，也可以用styled-components、CSS Module、内联样式等方案实现，不需要额外引入其他依赖，注意添加-webkit-前缀兼容Safari浏览器。

内容的提问来源于stack exchange，提问作者Pouney Design