JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

CSS

.box {
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    border: 25px solid rgba(0,0,0,0.1);
    background-color: #eee;
    margin-bottom: 20px;
}

.box1, .box2 {
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);   
}

.box2 {
    background-position: 0 center;
    background-size: auto calc(100% + 50px);
}

.box3 {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQIW2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEqRgDDwAAAABJRU5ErkJggg==);
}