JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blur">vdsvsdvsdvsdv</div>
<div class="grayscale">sdvsdvdsvsd</div>

<div class="blur-grayscale">cvsdvsdvsdcvsdvsdvdsvsdvsdvc</div>

CSS

BODY {
    background-image: url('http://photos-g.ak.instagram.com/hphotos-ak-xaf1/10844298_586223591478294_282103615_n.jpg');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.blur {
    overflow: hidden;
    background-image: url('http://photos-g.ak.instagram.com/hphotos-ak-xaf1/10844298_586223591478294_282103615_n.jpg');
    background-position: -100px -200px;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 200px;
    filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
}

.grayscale {
    overflow: hidden;
    background-image: url('http://photos-g.ak.instagram.com/hphotos-ak-xaf1/10844298_586223591478294_282103615_n.jpg');
    background-position: -300px -100px;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 300px;
    top: 100px;
    filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}

.blur-grayscale {
    overflow: hidden;
     background-position: -300px -300px;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 300px;
    top: 300px;
    filter: saturation(1);
	-webkit-filter: blur(5px) grayscale(1);
	-moz-filter: blur(5px) grayscale(1);
	-o-filter: blur(5px) grayscale(1);
	-ms-filter: blur(5px) grayscale(1);
}