<div class="container">
  <div class="gecko"> 
  </div>
  
   
</div> 

.container{
  height: 100vh; 
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center; 
  font-family: 'Varela Round', sans-serif; 
} 

.gecko{
  position: relative;
  display: inline-block; 
  width: 1.8rem;
  height: 1.8rem;
  margin-left: -215px;
  background:  #09B7BB;
  border-radius:50%;
  color: #000; 
 box-shadow: -22px -30px 0 0  #44B261;
}

.gecko:before{ 
  content: "gecko"; 
  position: absolute;
  left: 2.4rem;
  top: -2.5rem; 
  width: 1.8rem;
  height: 1.8rem;
  font-size: 6rem;
  font-weight: 700;
  box-shadow:  -60px 70px 0 0 #4789D4;
  border-radius: 50%;
} 

.gecko:after{ 
  content: "";
    position: absolute;
    left: -57px;
    top: 18px;
    right: 0;
    width: 1.8rem;
    height: 1.8rem;
    background: #FF1A6F;
    box-shadow: 0px -37px 0 0 #FF822F;
    border-radius: 50%;
} 

img{
  position: asolute;
  width: 300px;
}