JSFiddle - React, Tailwind, and code Playground

by adelura

HTML

<div></div>

CSS

div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, purple, yellow);
min-height: 100%;
width:256px;
height:256px;  
position:relative;
    z-index:1;
    transform: rotate(45deg);
}

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