<div class="container">
  <div class="eggOne"></div>
  <div class="eggTwo"></div>
  <div class="eggThree"></div>
  <div class="shadow"></div>
</div>

body {
  background-color: #bee3db;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.container {
  position: relative;
}

.eggOne, .eggTwo, .eggThree {
   position: absolute;
   overflow:hidden;
   display: inline-block;
   width: 126px;
   height: 180px;
   box-shadow: inset -10px -10px rgba(0,0,0,0.1);
   top:-100px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.eggOne {
  left:-300px;
  background: repeating-linear-gradient(#f9c74f, #f9c74f 10px,
  #90be6d 10px, #90be6d 20px);
}

.eggTwo {
  left:-100px;
  background-color: #f94144;
}

.eggTwo:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color: #fff;
  height:25px;
  width:25px;
  left:10px;
  box-shadow: 40px 20px #fff, 70px 60px #fff, 100px 30px #fff, 30px 175px #fff, 20px 60px #fff,-10px 95px #fff, -20px 135px #fff, 30px 135px #fff, 30px 95px #fff, 70px 105px #fff, -10px 40px #fff, 80px 155px #fff;
}

.eggTwo:after {
  content:"";
  position: absolute;
  box-shadow: inset -10px -10px rgba(0,0,0,0.02);
  width: 126px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.eggThree {
  left:100px;
  background: repeating-linear-gradient(-45deg, #70c1b3, #70c1b3 20px,
  #247ba0 20px, #247ba0 40px);
}

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  border-radius:50%;
  z-index:-1;
  width:130px;
  height:20px;
  top:65px;
  left:-300px;
  box-shadow: 200px 0 rgba(0,0,0,0.1), 400px 0 rgba(0,0,0,0.1);
}