JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div class="effect2" style="width:70%;height:100px;border:1px solid #121212">
</div>

<div id="test" style="width:70%;height:100px;border:1px solid #121212">
</div>
<div id="test3" style="width:70%;height:100px;border:1px solid #121212">
</div>
<div id="test4" style="width:70%;height:100px;border:1px solid #121212">
</div>

CSS

.effect2
{
  position: relative;
}
.effect2:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 35%;
  width: 30%;
  top: 0;
  max-width:300px;
  background:#000;
  -webkit-box-shadow: 0 15px 10px #00;
  -moz-box-shadow: 0 15px 10px #000;
  box-shadow: 0 15px 10px #000;
}

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}
#test3 {
    background-image: -moz-radial-gradient(
        0px 50%, /* the -23px left position varies by your "gap" */
        circle farthest-side, /* keep radius to half height */
        transparent 56px, /* transparent at center */
        transparent 0px, /*transparent at edge of gap */
        transparent 56px, /* start circle "border" */
        black 10px /* end circle border and begin color of rest of background */
    );
    
    background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
    background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);

}
#test4 {
    background: -moz-radial-gradient(0% 50%,circle farthest-corner, transparent 10%, #000 35%, #000 65% , transparent 90%);

}