<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.