JSFiddle - React, Tailwind, and code Playground

HTML

<center>
    <h1>Blurred image</h1><br/><br/>
<div id="wrapper">
    <div id="red"></div>
    <div id="overlay">
    </div>
</div>
</center>

<br/><br/><center><h1>original image</h1><br/><img src="http://i.imgur.com/oGvNc0L.png" width="200" height="200" /></center>

CSS

*{
    margin:0px;
    padding:0px;
}
#wrapper{
    position:relative;
}
#wrapper,#red,#overlay{
    width:200px;
    height:200px;
}
#red{
    position:absolute;
    top:0px;
    left:0px;
    background-image:url('http://i.imgur.com/oGvNc0L.png');
    background-size:cover;
}
#overlay{
    position:absolute;
    top:0px;
    left:0px;
    font-size:0px;
    opacity:0.6;
    background-color:rgb(100,270,313); /*change rgb values to vary image blur */
    box-shadow: 0px 0px 10px 10px rgb(20,190,233);
    border-radius:30px;
}