SOURCE

<div class='cicle'>
  <img src='https://static.thebump.com/homepage-assets/new/desktop/real_answers_v1.jpg'>
</div>

.cicle{
  position:relative;
}
.cicle:after{
  content:'';
  display:block;
  position:absolute;
  left:0px;
  top:100px;
  width: 200px;
  height: 100px;
  border-radius: 0 0 200px 200px;
  background:#ccc;
  opacity:0.4;
  box-sizing:border-box;
}
.cicle:before{
  content:'';
  display:block;
  position:absolute;
  left:0px;
  top:100px;
  width: 200px;
  height: 50px;
  background:#ccc;
  opacity:0;
  z-index:10000;
}
img{
  width:200px;
  height:200px;
  border-radius:50%;
  opacity:1;
}