复制 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

感谢 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);
}

Answer 2

你真的很接近，从左下角的颜色开始逆时针，
并且不要使用 mix-blend 模式来消除伪影。

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>

复制 5 色 CSS 渐变

Replicating a 5-color CSS gradient

css

colors

gradient

background-color

linear-gradients