<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.