<div class="egg"></div>

<div class="egg easter"></div>

.egg {
  aspect-ratio: 3 / 4;
  border-radius: 100% / 125% 125% 80% 80%;
}

/* demo */
.egg {
  width: 200px;
  background: #fca;
  display: inline-block;
  position: relative;
}

.egg.easter {
  background:
    radial-gradient(circle at 50% 63.5%, #fff 2%, #fff0 0) 0 0 / 50% 100% repeat-x,
    radial-gradient(farthest-side, #fff 70%, #fff0 80%) 50% 64% / 50% 1.75% repeat-x,
    linear-gradient(#0000 25%, #fd6 0 49%, #fff 0 51%, #f9a 0 75%, #0000 0),
    radial-gradient(closest-side circle at 50% 25%, #fff 99.99%, #0000) 0 25% / 10% 50%,
    #c9c
    ;
}

.egg.easter::before {
  content: "Easter Egg";
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: pre;
  text-align: center;
  font-family: 'Comic Neue', 'Comic Sans', 'Comic Sans MS', Helvetica, sans-serif;
  font-size: 24px;
}