JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background-pic-top"></div>
<div class="background-pic-bottom"></div>
<div class="top-blur" id="scrollingDiv">
    <div class="upper">
        <svg class="clip-svg" width="400" height="500" style="position: relative">
            <defs>
                <clipPath id="uppersvg" clipPathUnits="userSpaceOnUse">
                    <rect x="0" y="0" width="400" height="300" />
                </clipPath>
            </defs>
        </svg>
    </div>
    <div class="lower">
        <svg>
            <defs>
                <clipPath id="lowersvg" clipPathUnits="userSpaceOnUse" width="200" height="200">
                    <rect x="0" y="300" width="400" height="200" />
                </clipPath>
            </defs>
        </svg>
    </div>
</div>

CSS

body {
    margin: 0px;
}
.background-pic-top {
    background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);
    background-size:cover;
    position:fixed;
    z-index:-1;
    height:400px;
    width:400px;
    clip-path: url(#uppersvg);
    -webkit-clip-path: url(#uppersvg);
}
.background-pic-bottom {
    background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);
    background-size:cover;
    position:fixed;
    z-index:-1;
    height:400px;
    width:400px;
    clip-path: url(#lowersvg);
    -webkit-clip-path: url(#lowersvg);
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
.top-blur {
    height:400px;
    width:400px;
    overflow: auto;
}
.upper {
    height:300px;
    width:100%;
    background-color: rgba(255, 127, 80, 0.5);
}
.lower {
    top: 200px;
    height:200px;
    width:100%;
    background-color: rgba(0, 255, 255, 0.51);
}

JavaScript

var elem = document.getElementById('scrollingDiv');
var clipUp = document.getElementById('uppersvg');
var clipDown = document.getElementById('lowersvg');

elem.onscroll = function (e) {
    clipDown.getElementsByTagName('rect')[0].setAttribute('y', 300 - elem.scrollTop)
    clipUp.getElementsByTagName('rect')[0].setAttribute('y', 0 - elem.scrollTop)
}