HTML
CSS
JavaScript
<div class='container'><div class='masked'></div></div>
.container { width: 300px; height: 300px; position: relative; overflow: hidden; } .masked { width: 100%; height: 100%; background-color: lightblue; mask-image: radial-gradient(circle, black 50%, transparent 51%); mask-origin: center; mask-size: 200%; }
// No JavaScript required for this demo