Modal window with blur background

Use of pseudo-element with the svg blur filter to make the overlay container blurred without affecting its content.

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
</svg>
<h1>
  <span>BG blurring</span>
</h1>

CSS

body {
  padding: 0;
  margin: 0;
  background: url('http://lorempixel.com/800/800/nature') center / cover transparent fixed; 
}

h1 {
  text-align: center;
  border: 1px solid #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  margin-top: -150px;
  overflow: hidden;
  background: inherit;
}

h1 > span {
  position: relative;
  z-index: 1; /* place the text on top of the pseudo-element */
  color: #fff;
}
/* The magic happens here */
h1::after {
  content: '';
  filter:url(#f1); /* apply the svg blur filter */
  filter:blur(15px); /* apply the svg blur filter */
  position: absolute;
  left: -15px; /* move the container off the parent the same amount of pixels as the svg blur radius - stdDeviation */
  top: -15px;
  bottom: -15px;
  right: -15px;
  background: inherit;
  z-index: 0; /* place the pseudo-element behind the text */
}
svg {
  height:0;
}