如何使用CSS还原5色径向渐变？现有实现与目标差距大该怎么优化

纯CSS优化方案 #

可通过调整底层底色、渐变过渡范围、色值校准几个维度优化效果，核心修改点如下：

• 新增深色基础底色，解决原实现无底层暗调、整体亮度过高的问题
• 把径向渐变的透明阈值从70%提升到85%，让色彩过渡更柔和，避免生硬的渐变边界
• 校准各渐变点位的色值，匹配目标图的色彩倾向
• 可选择添加轻微模糊和饱和度调整，进一步模拟柔化的渐变质感

完整实现代码

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at 15% 20%, #3a2457 0%, transparent 85%),
    radial-gradient(ellipse at 65% 15%, #2b86d9 0%, transparent 85%),
    radial-gradient(ellipse at 100% 20%, #4158c9 0%, transparent 85%),
    radial-gradient(ellipse at 100% 90%, #b33e4a 0%, transparent 85%),
    radial-gradient(ellipse at 20% 95%, #31277a 0%, transparent 85%),
    /* 可选叠加中间调渐变，平衡整体亮度 */
    linear-gradient(135deg, rgba(22,14,38,0.7) 0%, rgba(22,14,38,0.2) 50%, rgba(22,14,38,0.7) 100%),
    /* 基础深色底色 */
    #110c1b;
  background-blend-mode: screen;
  /* 不需要柔化效果可以删除下面三行 */
  filter: blur(40px) saturate(1.2);
  transform: scale(1.1);
  overflow: hidden;
}

如果需要更高精度的还原，也可以用Canvas API绘制渐变，支持更细粒度的色彩和透明度控制，性能表现也能满足常规需求。

内容的提问来源于stack exchange，提问作者étale-cohomology