CSS background with linear colored radials

A designer came up with this type of background as shown in the image below. I would like to avoid using image backgrounds. So I'm trying to get my head around if it's possible to replicate this using the CSS background attribute.

The lowest layer is just a linear-gradient, no troubles there. But the circular shapes that are layered on top of that are not that easy (if possible at all).

My first thought was to use various radial-gradients for the circular shapes but as you can see these shapes have a linear fill and need a transparent background so the circle fades out. I see no way how to achieve this but I'm not CSS expert so I'd like to hear some opinions on this.

mask can help you approximate this

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

Or a basic rounded element with blur filter:

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