JSFiddle - React, Tailwind, and code Playground

HTML

<div id="_6">1</div>
<div id="_5">2</div>

CSS

div{
    border:5px solid red;
    width:300px;
    height:300px;
    margin:25px;
    padding:10px;
    display:inline-block;
    font-size:100px;
    position:relative;
}
#_1{
}
#_1:after{
    position:absolute;
    content:'';
    top:100%;
    left:0;
    display:block;
    width:100%;
    box-shadow:0 0 100px 200px black;
    clip:rect(-450px, auto, 0, 0);
}
#_2{
    margin-left:-35px;
    margin-left:-35px;
    background-image:-webkit-linear-gradient(bottom,#000 47%,#C0C0C0 65%,#FFF 85%);/*
    background-image:-moz-linear-gradient(bottom,#000 40%,#D3D3D3 30%,#FFF 50%);
    background-image:-ms-linear-gradient(bottom,#000 40%,#D3D3D3 80%,#FFF 50%);
    background-image:-o-linear-gradient(bottom,#000 40%,#D3D3D3 80%,#FFF 50%);
    background-image:linear-gradient(bottom,#000 40%,#D3D3D3 80%,#FFF 50%);*/
    
}