<div class="blur">
  <p>
    So this is a example of backdrop hope you understand.</p>
<div>
body{
  background:url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80') no-repeat center center fixed;
}

.blur{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:40%;
  padding:20px;
  font-size:1.5em;
  font-weight:bold;
  font-family:Monospace;
  /*background start here*/
  background-color:#ffffff3f;
  backdrop-filter:blur(5px);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.