如何为网页添加CSS渐变背景 解决linear-gradient渐变锯齿问题

你当前使用的45度线性渐变出现锯齿、色带断层，核心原因是短跨度内的颜色硬转折在浏览器渲染时没有做抗锯齿处理，可通过以下方案修复：

• 优先调整渐变本身的色标逻辑，拉长颜色过渡区间，同时固定背景避免滚动重绘产生锯齿，替换后的代码如下：

body {
  min-height: 100vh;
  margin: 0;
  /* 新增中间过渡色，拉开各颜色的占比区间，避免颜色急转 */
  background: rgb(85,205,252);
  background: linear-gradient(45deg, 
    rgba(85,205,252,1) 0%, 
    rgba(168,229,254,1) 22%,
    rgba(255,255,255,1) 48%, 
    rgba(250,207,217,1) 76%,
    rgba(247,168,184,1) 100%
  );
  background-attachment: fixed;
}

• 如果调整色标后仍有轻微锯齿，不要直接给body加模糊属性（会模糊页面所有内容），用单独的伪元素承载背景加极小半径模糊做抗锯齿处理，追加代码如下：

body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: blur(1.5px); /* 模糊半径控制在2px以内，不会让整体背景发虚 */
}

注意：如果用伪元素方案，记得把原本写在body上的background属性移到伪元素上，避免两层背景叠加导致颜色过艳

• 针对老旧设备、低分辨率屏幕的兼容场景，可以给背景叠加透明度1%~3%的细微噪点，利用人眼视觉特性弱化锯齿感知，不需要额外引入图片，用CSS噪点生成代码即可实现。

以上方案组合使用后，就能得到过渡平滑无锯齿的渐变效果，和预期展示效果一致。

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