具有线性彩色径向线的 CSS 背景

Question

一位设计师想出了这种类型的背景，如下图所示。我想避免使用图像背景。因此，如果可以使用 CSS background 属性复制它，我会努力思考。

最底层只是一个线性渐变，没有问题。但是在其之上分层的圆形并不那么容易(如果可能的话)。

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

Answer 1

mask 可以帮助你估计这个

.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>