Modal window with blur background

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

by Fabio Bernardi

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('https://media.giphy.com/media/3o7TKz6eMNdooOHzG0/giphy.gif') 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 */
  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;
}