Html 带圆弧的CSS梯度

我已经创建了一个垂直的线性梯度下降了一个长的页面与

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

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

但我希望每种颜色都能在页面上轻轻地向上弯曲（想想天空照片中的暗晕），但在页面长度上保持等距，并保持其微妙的渐变混合

下面是一个夸张的例子：

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

有什么办法可以做到这一点吗？我可以用CSS扭曲线性渐变吗？有没有办法用径向梯度呢？SVG

---

如果你想用原型进行实验，看看我想要的效果，.

使用

径向梯度

你需要控制半径，使水平方向的半径非常大，以获得你想要的效果：

html{
最小高度：300vh；
背景：径向梯度(
400%100%位于底部，/*调整400%以控制曲线*/
#0e1a34、5e7481、a0947a、c17a5c、ada7cb、d7e8fd、d7edf0）；
}

使用

径向梯度

您需要控制半径，使水平梯度非常大，以获得想要的效果：

html{
最小高度：300vh；
背景：径向梯度(
400%100%位于底部，/*调整400%以控制曲线*/
#0e1a34、5e7481、a0947a、c17a5c、ada7cb、d7e8fd、d7edf0）；
}

您可以用任何方式向我们展示您想要的近似值吗？我不知道天空照片中的暗晕，你能不能给我们一个你想要的近似值？我不明白天空照片中出现的暗晕，你想在发布前测试一下吗？@WesModes我从不发布未经测试的东西，如果这不是你想要的，你需要把问题弄清楚，并可能显示你想要达到的结果我问是因为我的浏览器（最新版本的chrome）忽略了带有和不带注释的CSS规则。“无效属性值”也许你指的是背景图像？@WesModes两者都可以工作，我也在使用最新版本的chrome，我使用的属性没有什么特别之处，它应该在任何地方都可以工作，除非你在复制/粘贴或删除评论时输入了错别字。你想在发布之前测试一下吗？@WesModes我从来没有发布过一些没有测试的东西，如果这不是你想要的，你需要让你的问题更清楚，并可能显示你想要达到的结果。我这样问是因为我的浏览器（最新版本的chrome）忽略了CSS规则和注释。“无效的属性值”也许你指的是背景图像？@WesModes两者的工作原理相同，我也在使用最新版本的chrome，我使用的属性没有什么特别之处，它应该可以在任何地方工作，除非你在复制/粘贴或删除注释时输入错误