CSS Blurred Box

HTML

<div class='glass'>
    <p>This has not been fully x-browsered. Its mostly guesswork.</p>
</div>

CSS

html, body, .glass::before {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
}
body, .glass::before {
    background-image: url('http://41.media.tumblr.com/ec8dca0ef18a145296a814c9c3feddd2/tumblr_mu210unRb41s6ylubo1_r1_1280.jpg');
    background-position:center center;
    background-attachment:fixed;
    background-size:cover;
}
.glass {
    border-radius:5px;
    background-color: white;
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 60%;
    height:40%;
}
.glass::before {
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content:' ';
    /* SVG filter as a data-url. no need to base64 encode (https://css-tricks.com/probably-dont-base64-svg/) */
    -webkit-filter: url(data:image/svg+xml;
    utf8, <svg xmlns=http://www.w3.org/2000/svg version=1.1><defs><filter id=blur><feGaussianBlur stdDeviation=5 /></filter></defs></svg>#blur);
    filter: url(data:image/svg+xml;
    utf8, <svg xmlns=http://www.w3.org/2000/svg version=1.1><defs><filter id=blur><feGaussianBlur stdDeviation=5 /></filter></defs></svg>#blur);
    /* regular css bluring */
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0.4;
}
.glass {
    transform: translateY(0);
    transform: translateY(0) translateZ(0);
    -webkit-transform: translateY(0);
    -webkit-transform: translateY(0) translateZ(0);
}
.glass p {
    margin:20px;
}