Pseudo Element to block lower portion of div

by Matthew Day

HTML

<div class="box"></div>

CSS

.box {
    position: relative;
    height: 200px;
    width: 400px;
    border: 1px solid gray;
}
.box:after {
    position: absolute;
    content:'';
    bottom: 0;
    left: 0;
    height: 100px;
    width: inherit;
    background: linear-gradient(rgba(255,255,255,1), rgba(240,0,0,1));
}