CSS Crazy Gradient

Question

有一个客户要求背景的奇怪请求看起来像这样:

但是使用一种颜色的不同色调代替.除了性能问题之外,有没有办法用CSS做到这一点？据我所知,CSS只适用于线性和径向渐变,因为这并不属于任何一个类别,我不确定还能做些什么.

理想情况下,我希望避免使用图像,主要是出于性能原因

如果有人有任何想法,很想听听他们!

Answer 1

body {
  background: linear-gradient(to right, rgba(0,0,0,0), teal), linear-gradient(to right, rgba(255,0,100,.3), rgba(255,100,127,.2)), linear-gradient(to top right, yellow, rgba(0,0,0,0)), radial-gradient(closest-corner at 20% 80%, yellow, red);
  background-attachment: fixed;
}

我尝试用尽可能接近CSS的方式来获得它,但颜色肯定会使用更多的振动.祝客户好运!