如何用CSS实现形状上的平滑渐变效果？

当然可以实现平滑的渐变过渡效果，问题出在你当前代码的渐变断点间隔太小，导致颜色切换生硬，同时部分混合模式属性也没必要保留。调整后的代码如下：

修改后的CSS代码 #

.bg-gradient {
  height: 400px;
  width: 300px;
  background: 
    conic-gradient(at 50% 5%,
      transparent 35%,
      rgba(80, 112, 230, 0.8) 45%,
      rgba(55, 217, 214, 0.6) 55%,
      transparent 65%) 50% -25px / 100% 100%;
  background-repeat: no-repeat;
  filter: blur(8px);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, black 10%, transparent 75%);
}

HTML代码 #

<div class="bg-gradient"></div>

关键调整说明 #

• 扩大渐变过渡区间：把原代码中紧凑的断点（如43%→47%）拉开，让透明色到蓝色、蓝色到青色、青色到透明的过渡区间更充足，从根源上解决颜色切换生硬的问题
• 优化模糊与遮罩：增大模糊滤镜的数值，同时调整径向遮罩的参数，让渐变边缘的柔化效果更自然
• 移除冗余属性：去掉了background-blend-mode和mix-blend-mode，这些属性在当前场景下会干扰渐变的平滑显示，且没有实际作用

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