iOS-like transparency effect in CSS with backdrop-filter

effect.css

.modal {
  padding: 1rem 2rem;
  max-width: 50%;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  font-family: sans-serif;
  line-height: 1.5;
}
.modal a { color: #bf0222; }

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .modal {
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .warning { display: none; }
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-image: url("http://41.media.tumblr.com/efd15be8d41b12a7b0ef17fba27c3e20/tumblr_mqqy59HMaf1qzattso1_1280.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  width: 100%;
  height: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

index.html

<div class="container">
  <div class="modal">
    <p class="warning"><strong>This only works in the <a href="http://nightly.webkit.org/">Webkit Nightlies</a>!</strong></p>
    <p>The background image should be pleasantly blurred under this box, <a href="http://i.imgur.com/z7s7uf6.png">like so</a>.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quae distinctio magnam, laborum iusto itaque autem! Molestiae enim distinctio molestias, dolores ea quasi magni nisi aspernatur magnam, voluptate eum fuga.</p>
  </div>
</div>