<div class="sparkle"></div>
<div class="sparkle border"></div>
.sparkle {
height: 300px;
width: 220px;
background: linear-gradient(45deg,#F8CA00,#fe7496);
mask:
radial-gradient(#0000 71%,#000 72% var(--_b,))
10000% 10000%/99.5% 99.5%;
}
.border {
--b: 10px; /* control the thickness */
--_b: calc(71% + var(--b)),#0000 calc(72% + var(--b));
}
/* 10000% = 100% * (50/(100 - 99.5)) */
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-auto-flow: column;
gap: 20px;
place-content: center;
place-items: center;
background: #594F4F;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.