CodePen Embed - CSS blur effect

<head>
  <script src="https://cdn.jsdelivr.net/ally.js/1.4.1/ally.min.js"></script>
</head>
<body>
  <div class="blur">
    <h1>Blurred heading</h1>
    <p>This is a blurred paragraph.</p>
    <button onclick="alert('You shouldn\'t be able to see this.');"  tabindex="-1" aria-hidden="true">Button</button>
  </div>
</body>

.blur {
  pointer-events: none;
  /* DON'T FORGET to ALSO set on focusable CHILDREN: 
  tabindex="-1"
  aria-hidden="true"
  */
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

* {
  background: rgb(32,32,32);
  color: whitesmoke;
  font-family: avenir, arial;
  padding: 10px;
  border-radius: 10px;
}

// instead of setting tabindex="-1" and aria-hidden="true" on all focusable children,
// you can instead set each focusable child as disabled (inert) with ally.js:
var element = document.getElementsByTagName('button')[0];
ally.element.disabled(element, true);

// include script https://cdn.jsdelivr.net/ally.js/1.4.1/ally.min.js

This Pen is owned by hchiam on CodePen.

See more by @hchiam on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.