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

.container{
  height: 100vh; 
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center; 
} 

.pill{
  position: relative;
  display: inline-block;
  width: 25rem;
  height: 11rem;
  background:#FF1A6F;  
  border-radius: 6rem; 
  box-shadow: 0 6px 8px -8px rgba(0,0,0,0.5)
}

.pill:before{ 
  content: ""; 
  position: absolute;
  left: 0;
  width: 50%;
  height: 11rem;
  background:#44B261;  
  border-top-left-radius: 6rem; 
  border-bottom-left-radius: 6rem; 
}

.pill:after{ 
  border-radius: 6rem; 
  content: ""; 
  position: absolute; 
  width: 96%;
  left: 2%;
  height: 100%;
  top:0;  
  border-radius: 6rem; 
  background: linear-gradient(
    to bottom,  
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.0) 25%,
    rgba(241,241,241,0.44) 50%,
    rgba(241,241,241,0) 51%,
    rgba(246,246,246,0.0) 100%
  );    


}