css - 带有线性彩色径向线的 CSS 背景

Question

一位设计师想出了这种类型的背景，如下图所示。我想避免使用图像背景。因此，如果可以使用 CSS 背景属性复制它，我正在尝试解决这个问题。

最低层只是一个线性梯度，没有问题。但是叠加在上面的圆形并不那么容易（如果可能的话）。

我的第一个想法是为圆形使用各种径向渐变，但正如您所见，这些形状具有线性填充并且需要透明背景，以便圆形淡出。我看不出如何实现这一点，但我不是 CSS 专家，所以我想听听对此的一些意见。

Answer 1

面具可以帮助你近似这个

.box {
  height:500px;
  background:linear-gradient(135deg,#001f8e,#00fdcf);
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(#00fdcf,#001f8e);
  -webkit-mask:radial-gradient(circle 120px,#000 75%,#0000);
}

<div class="box"></div>

或带有模糊滤镜的基本圆形元素：

.box {
  height:500px;
  background:linear-gradient(135deg,#001f8e,#00fdcf);
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  inset:calc(50% - 100px) calc(50% - 100px);
  background:linear-gradient(#00fdcf,#001f8e);
  border-radius:50%;
  filter:blur(10px);
}

<div class="box"></div>