你当前代码里的135deg角度是让渐变沿着左下到右上的斜向延伸，所以颜色分割线是斜的，呈现出横向过渡的效果。要实现从下到上的垂直渐变，我们需要调整渐变方向，同时明确百分比的计算逻辑（垂直方向下百分比基于容器高度）。

修改后的代码 #

body {
  height: 100vh;
  width: 100vw;
  margin: 0; /* 移除默认边距，避免滚动条干扰 */
  background-image: linear-gradient(
    to top, /* 直接指定渐变方向为从下到上，直观易懂 */
    rgba(255, 255, 255, 0) 32%,
    rgba(211, 71, 83, 1) 32%,
    rgba(98, 76, 94, 1) 52%,
    rgba(59, 70, 92, 1) 69%,
    rgba(255, 255, 255, 0) 69%
  );
}

关键说明 #

• 渐变方向的正确设置：to top是最直观的垂直向上渐变写法，它等价于0deg（linear-gradient的角度规则是从顶部开始顺时针旋转，0deg指向顶部，90deg指向右侧，180deg则是默认的从上到下）。之前用135deg会让渐变走斜向，自然不符合你要的垂直效果。
• 百分比的逻辑变化：当渐变方向改为垂直后，颜色后面的百分比会基于容器的高度计算，这样32%就表示从底部往上32%的位置开始切换颜色，完美匹配你要的从下到上过渡需求。
• 额外优化：加上margin: 0是为了消除body默认的边距，确保渐变能铺满整个视口，不会出现留白或滚动条。

如果你之前手动调整角度出现奇怪的效果，大概率是没搞清楚linear-gradient角度的定义——它不是渐变的起始方向，而是渐变终点的方向，所以直接用关键字to top/to bottom这类写法会比手动计算角度更不容易出错。

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