带弧线的 CSS 渐变

Question

我用

在长页面上创建了一个垂直线性渐变

.background {
    background-image: linear-gradient(#0e1a34, #5e7481, #a0947a, #c17a5c, #ada7cb, #d7e8fd, #d7edf0);
}

当然，它是线性的和垂直的，每个颜色在一个 div 中等距分布，类似于 100vw x 1000vh（长度会有所不同）。

但我希望每种颜色在页面上轻轻向上呈弧形（想想天空照片中发生的渐暗渐晕），但在页面长度上保持等间距，并保持它们微妙的渐变混合。

这是一个夸张的例子：

我尝试了径向渐变，将中心向下移动到页面底部并增加半径，但是颜色的间距变得奇怪或渐变混合变成了硬线。

任何想法如何做到这一点？我可以用 CSS 扭曲线性渐变吗？有没有办法用径向渐变来做到这一点？ SVG？

如果您想试用原型并查看我想要的效果，here you go。

Answer 1

使用radial-gradient，你需要控制半径并将水平方向的半径设置得很大才能达到你想要的效果：

html {
  min-height:300vh;
  background: radial-gradient(
      400% 100% at bottom, /* adjust the 400% to control the curve */
      #0e1a34, #5e7481, #a0947a, #c17a5c, #ada7cb, #d7e8fd, #d7edf0);
}

要使所有颜色具有相同的半径，您可以考虑使用多个背景，但要获得正确的褪色效果会有点棘手：

html {
  min-height:260vh;
  
  background: 
    radial-gradient(150% 90% at bottom,#0e1a34    ,#0e1a34,transparent) 0 100%,
    radial-gradient(150% 90% at bottom,transparent,#5e7481,transparent) 0 80%,
    radial-gradient(150% 90% at bottom,transparent,#a0947a,transparent) 0 60%,
    radial-gradient(150% 90% at bottom,transparent,#c17a5c,transparent) 0 40%,
    radial-gradient(150% 90% at bottom,transparent,#ada7cb,transparent) 0 20%,
    radial-gradient(150% 90% at bottom,transparent,#d7edf0,#d7edf0    ) 0 0%;
  background-size:100% 35%;
  background-repeat:no-repeat;
}