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

by

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>

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;
}
<div class="box">

</div>

More Related Contents:

  1. My code dont works but I don't know why [closed]
  2. How to change css of a div with a certain id when hovering over a certain element anywhere in the whole webpage?
  3. Changing a javascript element style
  4. How to hide a in a menu with CSS?
  5. How can I make a div stick to the top of the screen once it’s been scrolled to?
  6. Removing or replacing a stylesheet (a ) with JavaScript/jQuery
  7. How to know if a font (@font-face) has already been loaded?
  8. How do I edit a CSS variable using JS?
  9. Changing nav-bar color after scrolling?
  10. What do curly braces in JavaScript mean?
  11. Remove all classes that begin with a certain string
  12. Can I disable a CSS :hover effect via JavaScript?
  13. Add/remove class with jquery based on vertical scroll?
  14. How to use jQuery and jQuery plugins with PrimeFaces
  15. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  16. Is there any cross-browser javascript for making vh and vw units work
  17. width/height after transform
  18. Save a pre element as PDF with CSS
  19. jQuery event that triggers after CSS is loaded?
  20. jQuery Validation using the class instead of the name value
  21. How to make jQuery to not round value returned by .width()?
  22. Center flex item in container, when surrounded by other flex items
  23. Trees in Twitter Bootstrap [closed]
  24. How can I refresh the screen on browser resize?
  25. Fill available spaces between labels with dots or hyphens
  26. How to resize Twitter Bootstrap modal dynamically based on the content
  27. Uncaught TypeError: Cannot read property ‘top’ of undefined
  28. iphone/ipad triggering unexpected resize events
  29. Print repeating Page headers in Chrome [closed]
  30. Retain scrollbar position even after reloading using javascript

Leave a Comment