JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="div1">
<h2>This is some sample text that shows a blurred coloured background behind the text!</h2>
</div>

<div class="div2">
<h2>This is some sample text that shows a blurred coloured background behind the text!</h2>
</div>

CSS

.div1 {position:relative;margin:200px 0 0 0;}
.div2 {position:relative;margin:0;}

.div1 h2:before {
    content: "";
    position: absolute;
    top: -200px;
    left: 0;
    right: 0;
    bottom: -200px;
    max-height: 500px;
    max-width: 500px;
    background: radial-gradient(50% 50% at center center, rgba(10, 149, 231, .12) 0, rgba(10, 149, 231, 0) 100%);
	
}

.div2 h2:before {
    content: "";
    position: absolute;
    top: -200px;
    left: 0;
    right: 0;
    bottom: -200px;
    max-height: 500px;
    max-width: 500px;
    background: radial-gradient(50% 50% at center center, rgba(227,173,23,0.2) 0, rgba(227,173,23,0) 100%);
	margin:auto;
}