<div class="container">
  <div class="avocado "></div>
</div>
.container{
  height: 100vh; 
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center; 
} 

.avocado{
  position: relative;
  display: inline-block; 
  background: #44B261; 
  height: 20rem;
  width:14rem;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; 
  border: solid 2px #087A02;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#44b261+0,44b261+44,008e5a+100 */
background: rgb(68,178,97); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(68,178,97,1) 0%, rgba(68,178,97,1) 44%, rgba(0,142,90,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(68,178,97,1) 0%,rgba(68,178,97,1) 44%,rgba(0,142,90,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(68,178,97,1) 0%,rgba(68,178,97,1) 44%,rgba(0,142,90,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44b261', endColorstr='#008e5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  
  
  box-shadow: 15px 10px 10px -10px rgba(0,0,0,0.5);

  
}

.avocado:before{ 
  content: ""; 
  position: absolute;  
  width:6rem;  
  height:6rem; 
  bottom: 10%;
  border-radius: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #965D1C; 
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#965d1c+0,382a0a+100 */
background: rgb(150,93,28); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(150,93,28,1) 0%, rgba(56,42,10,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(150,93,28,1) 0%,rgba(56,42,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(150,93,28,1) 0%,rgba(56,42,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#965d1c', endColorstr='#382a0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  box-shadow: 0 0 8px 0px #382a0a;
  
}
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.