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

$bg-color: #ddd;


body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: radial-gradient(lighten($bg-color, 5), darken($bg-color, 8));
  
}

.background {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  box-shadow: 0 0px 35px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background: #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

$egg-yellow: #FACA3B;
.egg {
  width: 220px;
  height: 220px; 
  border-radius: 36% 64% 59% 41% / 46% 40% 60% 54%;
  background: white;
  box-shadow: -5px 5px 10px 3px rgba(black, .15),
    inset 5px 5px 0 darken(white, 3);
  
  &:before {
    content: "";
    width: 90px;
    height: 90px;
    background: $egg-yellow;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset -5px -10px 0 darken($egg-yellow, 10);
  }
}