JSFiddle - React, Tailwind, and code Playground

by otunik

HTML

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

CSS

.box {
    width: 400px;
    height: 150px;
    position: relative;
    display: inline-block;
}

.mesh1, .mesh {
	background:
        -webkit-linear-gradient(5deg,  rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5))
}

.mesh:after, .mesh:before {
    content: "";
    right: 0px;
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
}
.mesh2, .mesh:after {
	background:
    -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 80%), rgba(250, 0, 0, 0.6) 40%, rgba(250, 250, 4, 0.6) 10%;}
.mesh3, .mesh:before {
	background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);}