JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<div></div>

CSS

div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width: 256px;
height: 256px;
position: relative;
z-index: 1;
box-shadow: inset -20px 0 38px -18px #ff26f9,inset -3px -13px 65px -18px yellow;
}

div:before,div:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
div:before{
    background: red;
    box-shadow: 0 0 140px 64px red;
    z-index:2;
    top: -96%;
left: -72%;
    opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 140px 64px white;
opacity: 1;
border-radius: 100%;
}