javascript - How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?

Question

I have been trying to create a section of a webpage that looks like the image below with just CSS. I can not figure out how to create the curves the top and bottom of the background and keep intact the transparent overlays. The section above and below (partially shown) also use transparent backgrounds. So, you see the different shades the circles have.

Answer 1

I think the best approximation you can have with only CSS is the use of radial-gradient:

.box {
  margin:50px;
  height:300px;
  background:
   radial-gradient(ellipse at top ,transparent 19.5%,#3adecf 20%, #3ae7be) top/400% 50% no-repeat,
   radial-gradient(ellipse at bottom ,transparent 19.5%, #3ae3c5 20%,#3ae7be) bottom/400% 50% no-repeat;

}

body {
 background:pink;
}

<div class="box">

</div>