<p>hover the boxes to see the tricks</p>
<div class="box one"></div>
<div class="box two"></div>
.box {
display: inline-block;
width: 200px;
aspect-ratio: 1;
background: linear-gradient(135deg,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);
transition: .35s;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.one {
--mask: radial-gradient(30px at 50% 30px,#0000 97%,#000) 50% -30px/ 55.50px 100%;
}
.one:hover {
--mask: radial-gradient(30px at 50% 30px,#0000 97%,#000) 50% 0/ 55.50px 100%;
}
.two {
--mask: radial-gradient(30px at 30px 50%,#0000 97%,#000) -30px/ 100% 55.50px;
}
.two:hover {
--mask: radial-gradient(30px at 30px 50%,#0000 97%,#000) 0/ 100% 55.50px;
}
body {
background: linear-gradient(90deg,#ddd,#fff);
}
p {
margin:0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.