Linear Gradient Banding问题：多方案尝试无效，求修复指导

你的原始代码（已修正语法错误） #

*, *::before, *::after {
    box-sizing: border-box;
    font-family: GothamRndMedium, sans-serif;
    font-weight: normal;
}

@font-face {
    font-family: 'GothamRndMedium';
    src: url('fonts/gothamrnd_medium.otf') format('opentype');
}

body {
    padding:0;
    margin:0;
    background: linear-gradient(to bottom left, pink 0%, green 100%);
}

问题分析 #

线性渐变出现条带，核心原因是低色彩深度设备或浏览器渲染时，无法平滑衔接差异较大的两种颜色，导致色阶断层。以下是实测有效的修复方案：

修复方案 #

1. 添加细微噪声（抖动）消除条带

这是最直接有效的方法，通过叠加半透明噪声背景，利用视觉混淆掩盖色阶断层：

• 方案一（Base64噪声图，无需额外文件）

  body {
      padding: 0;
      margin: 0;
      background: 
          linear-gradient(to bottom left, pink 0%, green 100%),
          url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAADFJREFUKFNjZGBg+M+AAhJBCtb9/98AAAAASUVORK5CYII=");
      background-blend-mode: overlay;
  }
  

• 方案二（CSS生成噪声，兼容性稍差）

  body {
      padding: 0;
      margin: 0;
      position: relative;
      background: linear-gradient(to bottom left, pink 0%, green 100%);
  }
  body::after {
      content: "";
      position: fixed;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(0,0,0,0.03));
      background-size: 4px 4px;
      pointer-events: none;
  }
  

2. 切换到宽色域色彩空间

浏览器默认的sRGB色彩空间对大跨度渐变支持有限，改用lab()或oklch()色彩空间（更贴合人眼感知），能提升过渡平滑度：

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to bottom left, 
        lab(80% 60 0), /* 对应粉色 */
        lab(80% -60 80) /* 对应绿色 */
    );
}

3. 优化渐变尺寸

给渐变设置更大的背景尺寸，拉长过渡区间，减少色阶断层：

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to bottom left, pink 0%, green 100%);
    background-size: 200% 200%;
}

额外提示 #

你之前尝试的添加中间色、改用rgba的思路是对的，但如果颜色跨度太大，效果有限，可以结合上述噪声方案一起使用，能获得更理想的平滑效果。

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