如何实现半图片半模糊渐变且边缘无明显分割线的按钮

老哥我懂你的痛点！做了半图半模糊渐变的按钮，结果生硬的分割线直接毁了设计感，太闹心了对吧？我来给你分享两个亲测好用的解决办法，保证能让边缘融合得丝滑自然～

方法一：用CSS Mask实现柔和过渡 #

这个方法的核心是利用mask属性，让图片和模糊区域的边界产生自然的渐变过渡，完全消除硬线。

先写基础的HTML结构：

<button class="smooth-blend-btn">查看详情</button>

然后是CSS代码：

.smooth-blend-btn {
  position: relative;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  /* 左侧显示完整图片 */
  background: url('你的图片地址') left/cover no-repeat;
}

.smooth-blend-btn::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%; /* 可以根据需求调整模糊区域的宽度 */
  height: 100%;
  /* 右侧用同一张图的右半部分，叠加渐变+模糊 */
  background: url('你的图片地址') right/cover no-repeat;
  backdrop-filter: blur(6px);
  /* 关键：用mask实现从实到虚的过渡，彻底消除硬线 */
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0) 75%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0) 75%);
}

小细节调整： #

• 把mask-image里的75%改成更大或更小的数值，就能调整过渡区域的宽窄，数值越大过渡越窄，越小过渡越柔和
• backdrop-filter: blur(6px)里的模糊值可以根据设计需求调，4-10px是比较常用的范围

方法二：双层伪元素叠加渐变模糊 #

如果你的项目需要兼容一些不支持mask的旧浏览器，这个方法更稳妥，用两层伪元素分别承载图片和模糊渐变层，通过渐变的透明通道实现融合。

CSS代码如下：

.smooth-blend-btn {
  position: relative;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  /* 按钮本身设个透明背景，让伪元素显示出来 */
  background: transparent;
  z-index: 1;
}

/* 底层放完整的背景图 */
.smooth-blend-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('你的图片地址') center/cover no-repeat;
  z-index: -2;
}

/* 上层放渐变+模糊，覆盖右半部分 */
.smooth-blend-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 渐变从右到左，从半透明深色过渡到完全透明，实现自然融合 */
  background: linear-gradient(to left, rgba(20,20,20,0.5), transparent 65%);
  backdrop-filter: blur(5px);
  z-index: -1;
}

这个方法里，你可以调整渐变中transparent的位置（比如65%），来控制过渡的柔和程度，多试几次就能找到和设计稿完全匹配的效果啦～

备注：内容来源于stack exchange，提问作者Mirza Irtiza