如何生成边缘完全透明的CSS径向渐变效果

问题出在径向渐变未设置合适的过渡范围，默认渐变逻辑会让白色在按钮边缘附近残留，结合元素圆角，视觉上就会出现明显实色边缘。

关键修改点 #

• 明确设置渐变的形状、中心点和终止位置，让白色在按钮内部就完全过渡为透明，避免边缘残留
• 调整伪元素的定位上下文，确保渐变边界和按钮圆角完全贴合

修改后的完整CSS代码 #

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #7da9ff;
}

.container {
  max-width: 1320px;
  padding: 0 20px;
  text-align: center;
  margin: auto;
  padding-top: 240px;
}

.btn {
  position: relative;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.btn::before {
  z-index: -5;
  background-image: linear-gradient(to bottom, #a5b7ff, #4469ff);
  box-shadow: inset 0 -6px 2px #2650f9, inset 0 -8px #0931d7;
}

.btn span {
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  border-radius: 28px;
  position: relative; /* 新增：让伪元素相对于span定位 */
}

.btn span::before {
  display: inline-block;
  width: 100%;
  height: 100%;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 28px;
  /* 修改径向渐变：中心圆形扩散，65%位置完全透明 */
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 65%
  );
}

.btn,
.btn::after,
.btn::before {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 28px;
}

.btn::after,
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

.btn::after {
  box-shadow: 0 9px 20px rgba(43, 58, 171, 0.2),
    0 37px 37px rgba(43, 58, 171, 0.17), 0 84px 50px rgba(43, 58, 171, 0.1),
    0 149px 59px rgba(43, 58, 171, 0.03);
  border: none;
  background-image: conic-gradient(
    #a5b7ff,
    #718cfa 135deg,
    #a6b8ff 180deg,
    #7d97ff 225deg,
    #466aff
  );
  z-index: -10;
  transform: translateY(12px);
}

效果说明 #

1. 给.btn span添加相对定位，确保内部伪元素的渐变范围完全匹配按钮的圆角区域
2. 将径向渐变的透明终止点设为65%，白色会在按钮边缘之前就完全过渡为透明，不会留下实色痕迹（可根据视觉需求在60%-70%区间调整该数值）
3. 保留原有按钮的多层视觉结构，不破坏原本的立体效果

内容的提问来源于stack exchange，提问作者Manjesh R V