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 ba

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;
}

Or you consider the use of mask

.box {
  margin:50px;
  height:300px;
  background:linear-gradient(45deg,red,blue);
  -webkit-mask:
   radial-gradient(60% 30% at top    ,transparent 98%, #fff) top   /100% 50% no-repeat,
   radial-gradient(60% 30% at bottom ,transparent 98%, #fff) bottom/100% 50% no-repeat;
  mask:
   radial-gradient(60% 30% at top    ,transparent 98%, #fff) top   /100% 50% no-repeat,
   radial-gradient(60% 30% at bottom ,transparent 98%, #fff) bottom/100% 50% no-repeat;

}

body {
 background:pink;
}