<div class="container">
   <div class="blur"></div>
  <div class="content">
    <img src = "http://img3.wikia.nocookie.net/__cb20121119220642/antfarm/images/c/cc/Apple_logo_black.svg.png" style="max-width: 100px; max-height: 100px">
  	
    <p>The iOS blur effect is nifty.</p>
  </div>


</div>

body, div.blur {
	background-image: url('https://www.hdwallpapers.in/download/digital_space_universe_4k_8k-3840x2160.jpg');
}

body {
  margin: 0px;
  background-color: blue;

}

div.container {
  position: relative;
  width: 280px;
  height: 200px;
  overflow: hidden;
  border-radius: 20px;
  padding: 10px;
  
  
}

div.content {
  margin-top: 15px;
	text-align: center;
  font-size: 22px;
  font-family: sans-serif;
  
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 20px;
  
   -webkit-filter: blur(0px) contrast(1.3) drop-shadow(0px 0px 10px rgba(255,255,255, 1)) opacity(.6);
     -moz-filter: blur(0px) contrast(1.5) drop-shadow(0px 0px 10px rgba(255,255,255, 1)) opacity(.6);
     filter: blur(0px) contrast(1.5) drop-shadow(0px 0px 10px rgba(255,255,255, 1)) opacity(.6);
    
}

div.blur {
  border: 1px solid green;
  position: absolute;
  left: -20px;
  top: -20px;
  width: 2000px;
  height: 2000px;
  
  -webkit-filter: blur(10px) contrast(.8) brightness(1.4) ;
  -moz-filter: blur(6px) contrast(.8) brightness(1.6);
  filter: blur(6px) contrast(.8) brightness(1.6);
    
}

cont = $$('div.container').first();
viewport = document.viewport.getDimensions();

cont.style.left = ((viewport.width / 2) - (cont.getWidth() /2 )) + 'px';
cont.style.top = ((viewport.height / 2) - (cont.getHeight() /2 )) + 'px';


offset = cont.cumulativeOffset();
blur = $$('div.blur').first();

blur.style.backgroundPositionX = '-' + (offset[0] - 20) + 'px'; blur.style.backgroundPositionY = '-' + (offset[1] - 20) +  'px';




// $$('div.content').first().innerHTML = (cont.getWidth());