复制 5 色 CSS 渐变答案

【问题标题】：Replicating a 5-color CSS gradient复制 5 色 CSS 渐变
【发布时间】：2021-11-30 15:25:21
【问题描述】：

我正在尝试在 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;
}

【问题讨论】：

相关：stackoverflow.com/q/60209914/8620333

标签： css colors gradient background-color linear-gradients

【解决方案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>

【讨论】：

漂亮的解决方案。（我为顶部中间颜色添加了radial-gradient(ellipse at 70% 10%, #2975bf 0%, transparent 55%)，不确定是否需要）

【解决方案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);
}

【讨论】：