复制5色CSS梯度

Question

我试图在CSS中复制以下梯度：

​

​

我所做的最好的事情是：

background:
  radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
  radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
  radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
  radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
  radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
background-blend-mode:screen;

并不是那么接近：

​

​

是否有可能离图像的梯度更近？(它不必是CSS，Javascript也是有效的，甚至是外部库。但首选是纯CSS。)

​

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at 20% 20%, #35234b 0%, transparent 70%),
    radial-gradient(ellipse at 60% 20%, #2975bf 0%, transparent 70%),
    radial-gradient(ellipse at 100% 20%, #3d54b1 0%, transparent 70%),
    radial-gradient(ellipse at 100% 100%, #9f3c54 0%, transparent 70%),
    radial-gradient(ellipse at 20% 100%, #362d6f 0%, transparent 70%);
  background-blend-mode:screen;
}

​

Answer 1

你真的很接近，从左边的底色开始逆时针方向，

也不要使用混合模式来去除人工制品。

​

body {  
  font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
  min-height: 150vh;
  padding: 2em;
  margin: 0;
  color: hsla(0, 0%, 100%, 0.85); 
  
  background-color: #170d24;
  background-image:
    radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
    radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}

<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>

​

Answer 2

多亏了Temani Afif的建议，我提出了以下建议。仍然不确切，但比以前更接近了。如果有人想在这方面有所改进，这是非常受欢迎的。

​

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background:linear-gradient(to right, #35234b 0% 10%,#2975bf 60% 70%,#3d54b1 80% 100%);
}

body::before{
  content:""; display:block; height:100%;
  background:linear-gradient(to right, #362d6f,#9f3c54);
  -webkit-mask:linear-gradient(to bottom,transparent, #fff); 
  mask:linear-gradient(to bottom,transparent, #fff);
}

​