如何用CSS延续SVG中的渐变效果？

一、先梳理SVG的核心渐变信息 #

你的SVG里有两个线性渐变，底部路径使用的paint1_linear_28_1413是我们需要延续的目标，先提取它的关键参数：

• 渐变起点：(x1=800, y1=127.719)
• 渐变终点：(x2=844.5, y2=1230.6)
• 渐变节点：
  • 偏移0：#FFDCDC（完全不透明）
  • 偏移0.174971：#FFBDBD，透明度0.416667
  • 偏移0.775916：#FFA0A0，完全透明（透明度0）

二、计算SVG底部对应的渐变进度 #

SVG的viewBox是0 0 1600 400，意味着SVG的底部边缘在y=400的位置，我们需要算出这个位置在渐变路径中的相对进度：

1. 渐变总y轴长度：1230.6 - 127.719 = 1102.881
2. 渐变起点到SVG底部的y轴距离：400 - 127.719 = 272.281
3. 对应的渐变偏移量：272.281 / 1102.881 ≈ 0.2469

通过线性插值计算这个偏移量对应的颜色和透明度：

• 颜色：从#FFBDBD到#FFA0A0过渡，最终近似为#FFB9B9
• 透明度：从0.416667到0过渡，最终近似为0.367

三、构建div的CSS渐变 #

原渐变是略微向右下倾斜的，计算出倾斜角度约为87.7度（几乎垂直向下），所以div的CSS渐变可以这样写：

#gradient-box {
  /* 精确角度版本 */
  background: linear-gradient(87.7deg, rgba(255, 185, 185, 0.367) 0%, rgba(255, 160, 160, 0) 100%);
  /* 近似垂直版本，视觉差异极小 */
  /* background: linear-gradient(to bottom, rgba(255, 185, 185, 0.367) 0%, rgba(255, 160, 160, 0) 100%); */
}

四、完整HTML示例 #

确保SVG自适应宽度，div支持动态高度：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    svg {
      width: 100%;
      display: block; /* 消除SVG默认行间距 */
    }
    #gradient-box {
      min-height: 400px; /* 可根据需求调整或移除，实现动态高度 */
      background: linear-gradient(87.7deg, rgba(255, 185, 185, 0.367) 0%, rgba(255, 160, 160, 0) 100%);
    }
  </style>
</head>
<body>
<svg width="1600" viewBox="0 0 1600 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M452.5 85.0981C217.5 29.5982 148.5 -12.9019 0 3.59814V765.598H1600V69.5981C1011 214.098 1118 -101.902 452.5 85.0981Z" fill="url(#paint0_linear_28_1413)"/>
<path d="M1600 165.598C848 -1.90192 667 457.098 0 178.598V1261.6H1H1600V165.598Z" fill="url(#paint1_linear_28_1413)"/>
<defs>
<linearGradient id="paint0_linear_28_1413" x1="832.5" y1="17.5" x2="832.5" y2="684" gradientUnits="userSpaceOnUse">
<stop stop-color="#F7DCDC"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint1_linear_28_1413" x1="800" y1="127.719" x2="844.5" y2="1230.6" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFDCDC"/>
<stop offset="0.174971" stop-color="#FFBDBD" stop-opacity="0.416667"/>
<stop offset="0.775916" stop-color="#FFA0A0" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
<div id="gradient-box">渐变盒子（高度可动态调整）</div>
</body>
</html>

快捷优化方案 #

如果不想做精确计算，可以直接用浏览器颜色拾取工具吸取SVG底部的颜色和透明度，把这个值作为CSS渐变的起点，视觉一致性会更直观。

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