JSFiddle - React, Tailwind, and code Playground

by ordette

HTML

<div></div>

CSS

div {
  height: 100px;
  width: 100px;
  border-radius: 50px;
background-color: rgba(200,200,200,1);
  margin: 0 auto;
  margin-top: 200px;
  position: relative;
   background-image: radial-gradient(ellipse farthest-corner at 5px 5px , #000 0%, rgba(0, 0, 0, 0) 50%, #000 95%);
   box-shadow: -5px -5px 4px 4px red;
}

div:after {
  height: 100px;
  width: 100px;
background-color: rgba(200,200,200,1);
  position: absolute;
  content:"";
  //bottom: 50px;
  left: -80px;
  border-radius: 60px;
   background-image: radial-gradient(ellipse farthest-corner at 5px 5px , #000 0%, rgba(0, 0, 0, 0) 50%, #000 95%);
   box-shadow: -5px -5px 4px 4px red;
}

div:before {
  content:"";
  height: 100px;
  width: 100px;
  border-radius: 60px;
  background-color: rgba(200,200,200,1);
  position: absolute;
 // top: 20px;
  right: 40px;
 background-image: radial-gradient(ellipse farthest-corner at 5px 5px , #000 0%, rgba(0, 0, 0, 0) 50%, #000 95%);
  box-shadow: -5px -5px 4px 4px red, -144px -24px 0 -45px red;
}