golden orange autumn background blur bokeh, defocusing lens
golden orange autumn background blur bokeh, defocusing lens

Blurred Background CSS snippet. While waiting for the official property, the trick is to create blurred version of the background, and set the background property both of them (main body background and box that want to be blurred) to be cover sized and fixed.

HTML code:


<div id="box1" class="box blurred-bg tinted">
  <div class="content">
    <h1>Blurred Background</h1>
	    <h2>By <a href="http://ariona.net" rel="follow" target="_blank">Ariona, Rian</a></h2>
    	<p>Drag this box to move around</p>
    <p class="related">See also: <a href="https://codepen.io/ariona/details/LVZLGP/" target="_blank">Staged Dropdown Animation</a></p>  
  </div>
</div>

SCSS code:

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);

$normal-img:"https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg";
$blurred-img:"https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg";

body{
	background-image:url($normal-img);
	background-repeat:no-repeat;
	background-size: cover;
	background-attachment: fixed;

	font-family:Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;
}
.blurred-bg{

	background-image:url($blurred-img);
	background-repeat:no-repeat;
	@include background-size(cover);
	background-attachment: fixed;
   
	&.tinted{
		@include background-image(linear-gradient(0deg, rgba(255,255,255,.2),rgba(255,255,255,.2)),url($blurred-img));
	}
	&.shaded{
		@include background-image(linear-gradient(0deg, rgba(0,0,0,.2),rgba(0,0,0,.2)),url($blurred-img));
	}
}
.box{
	width:500px;
	height:300px;
  left:-webkit-calc( 50% - 250px );
  top:20%;
	position:absolute;
	border-radius:5px;
	@include box-shadow(0 20px 30px rgba(0,0,0,.6));
	border:1px solid rgba(255,255,255,.3);
	padding:20px;
	text-align: center;
	@include box-sizing(border-box);
	text-shadow:0 1px 1px rgba(0,0,0,.4);
  display: flex;
  transition: box-shadow .3s ease;
  
	&:active{
    cursor:move;
    @include box-shadow(0 20px 50px rgba(0,0,0,.9));
  }
  
  .content{
    margin: auto;
  }
}
h1,h2,a,p{
	color:white;
	font-weight:100;
  
	.tinted &{
		color:black;
		text-shadow:0 1px 1px rgba(255,255,255,.2);
	}
}
h2{ font-size: 14px }
p{ 
  margin: 20px;
  &.related{
    text-transform: uppercase;
    font-weight: 700;
    color: #444;
    
    a{
      font-weight: 700;
      text-decoration: none;
      &:hover{
        text-decoration: underline;
      }
    }
  }
}

JS code:

$(function() {
	$( ".box" ).draggable();
});

Libraries needed:

https://code.jquery.com/jquery-2.2.4.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js

Demo: