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>

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

CSS background with linear colored radials

css

radial-gradients

css-gradients