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

CSS 圆弧渐变

CSS gradient with arc

html

css

linear-gradients

radial-gradients