JSFiddle - React, Tailwind, and code Playground

HTML

<div id="_1">1</div>
<div id="_2">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;
    background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,1) 100px,rgba(0,0,0,0) 300px);
    background-image:-moz-linear-gradient(bottom,rgba(0,0,0,1) 100px,rgba(0,0,0,0) 300px);
    background-image:-ms-linear-gradient(bottom,rgba(0,0,0,1) 100px,rgba(0,0,0,0) 300px);
    background-image:-o-linear-gradient(bottom,rgba(0,0,0,1) 100px,rgba(0,0,0,0) 300px);
    background-image:linear-gradient(bottom,rgba(0,0,0,1) 100px,rgba(0,0,0,0) 300px);
}