JSFiddle - React, Tailwind, and code Playground
HTML
<div class="test"></div>
CSS
.test {
width: 300px;
height: 300px;
border: 3px solid black;
background-image: -webkit-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
background-image: -moz-radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
background-image: radial-gradient(closest-side, rgba(255,0,0,1) 0, rgba(255,0,0,1) 75%, rgba(244,90,90,0.5) 88%, rgba(255,255,255,0) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}