带弧度的CSS渐变

Question

我在一个长长的页面上创建了一个垂直的线性渐变，使用了

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

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

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

下面是一个夸张的例子。

我尝试了径向梯度，将中心移到页面底部，并增加半径， 但要么颜色的间距变得奇怪，要么梯度混合变成了一条硬线。

有什么办法可以让这种情况发生吗？我可以用CSS来扭曲线性渐变吗？有什么方法可以让我用径向梯度？SVG？

如果你想用原型做实验，看看我想要的效果。给你.

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;
}