<div class="container">
  <div class="blur-effect">
    <p>Blur Effect</p>
  </div>
</div>
.blur-effect {
  backdrop-blur: 10px;
}

.container {
  text-align: center;
  height: 100%;
  width: 100%;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.