JSFiddle - React, Tailwind, and code Playground

HTML

<id class="base">
</id>

CSS

.base {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    position: absolute;
}

.base:before, .base:after {
    background-image: url("http://placekitten.com/200/300"); 
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
}

.base:after {
    -webkit-filter: grayscale(1);
    -webkit-mask-size: 200px 200px;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px); 
}