如何用CSS实现图片边缘模糊化，消除生硬扁平感？

下面提供两种实用的CSS方法，帮你弱化图片右侧和底部的生硬边缘：

方法一：伪元素+背景渐变+模糊滤镜 #

这种方法通过给图片容器添加伪元素，在边缘生成带模糊的过渡区域，完美贴合页面背景，不会影响图片主体清晰度。

实现代码 #

<!-- 给图片套一个容器 -->
<div class="img-wrapper">
  <img src="你的图片路径" alt="渐变背景图" class="grad-img">
</div>

.img-wrapper {
  position: relative;
  width: 600px; /* 对应图片宽度 */
  height: 400px; /* 对应图片高度 */
  overflow: hidden;
}

.grad-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右侧模糊边缘 */
.img-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px; /* 模糊区域宽度，可按需调整 */
  /* 渐变颜色要和页面背景色匹配，这里以白色为例 */
  background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
  backdrop-filter: blur(6px); /* 模糊强度，数值越大越模糊 */
  pointer-events: none; /* 不阻挡图片上的交互 */
}

/* 底部模糊边缘 */
.img-wrapper::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px; /* 模糊区域高度，可按需调整 */
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));
  backdrop-filter: blur(6px);
  pointer-events: none;
}

关键调整点 #

• 修改width/height控制模糊区域的大小
• 调整blur()的数值改变模糊程度
• 渐变中的颜色必须和你的页面背景色一致，才能实现自然过渡

方法二：图片遮罩+整体模糊 #

如果追求更简洁的代码，可以直接对图片应用遮罩和滤镜，适合对图片整体清晰度要求不高的场景。

实现代码 #

.grad-img {
  width: 600px;
  height: 400px;
  object-fit: cover;
  filter: blur(2px); /* 轻微模糊整张图片 */
  /* 遮罩控制边缘透明过渡，可调整百分比改变过渡范围 */
  mask-image: linear-gradient(to bottom right, #000 92%, transparent 100%);
}

说明 #

• mask-image的渐变里，#000区域完全显示图片，transparent区域逐渐透明，配合滤镜实现边缘柔和效果
• 这种方法会轻微模糊整张图片，如果需要保留主体清晰度，优先选方法一

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