css - blurred circle

HTML

<div id="one"><img src="http://www.hdwallpapers.in/walls/abtsract_tunnel-wide.jpg" />

</div>
<div id="two"><img src="http://www.hdwallpapers.in/walls/abtsract_tunnel-wide.jpg" />
</div>

CSS

#one, #two {
    position: absolute;
    width: 200px;
    height: 400px;
    font-size: 18px;
}

#one {
    top: 20px;
    left: 20px;
    background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px); 
    background-position: -20px -20px;
}

#two {
    top: 0px;
    left: 0px;
    -webkit-filter: blur(8px);      
    -webkit-mask-position: -20px -20px;
    -webkit-mask-size: 200px 400px;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px); 
    background-color: white;
}