background CSS с линейными цветными радиусами

Question

Дизайнер придумал этот тип фона, как показано на изображении ниже.
Я бы не хотел использовать фоновые изображения.
Итак, я пытаюсь понять, можно ли воспроизвести это с помощью атрибута background CSS.

Самый нижний слой - это просто линейный градиент, там никаких проблем. Но круглые формы, которые накладываются поверх этого, не так просты (если это вообще возможно).

Моя первая мысль заключалась в том, чтобы использовать различные радиальные градиенты для круглых форм, но, как вы можете видеть, эти формы имеют линейную заливку и нуждаются в прозрачном фоне, чтобы круг постепенно исчезал. Я не вижу способа добиться этого, но я не эксперт по CSS, поэтому хотел бы услышать некоторые мнения по этому поводу.

_{Свободный перевод вопроса CSS background with linear colored radials от участника @Solide.}

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>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

background CSS с линейными цветными радиусами

Ответы (1 шт):