<div></div>
<div class="mask"></div>
<div class="mask mask2"></div>
html, body {
width: 100%;
height: 100%;
display: flex;
}
div {
width: 200px;
height: 200px;
margin: auto;
background:
radial-gradient(circle at 0 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5) 200px, transparent 200px),
radial-gradient(circle at 100% 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5) 200px, transparent 200px),
radial-gradient(circle at 0 100%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5) 200px, transparent 200px),
radial-gradient(circle at 100% 100%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5) 200px, transparent 200px);
// mask: radial-gradient(transparent, transparent 50px, #000 50px, #000), linear-gradient(#000 0%, #000 100%);
// mask-composite: exclude;
}
.mask {
background: #000;
mask:
radial-gradient(circle at 0 0, #000, #000 200px, transparent 200px),
radial-gradient(circle at 100% 0, #000, #000 200px, transparent 200px),
radial-gradient(circle at 0 100%, #000, #000 200px, transparent 200px),
radial-gradient(circle at 100% 100%, #000, #000 200px, transparent 200px);
mask-composite: destination-in;
}
.mask2 {
mask-composite: xor;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.