CodePen Embed - backdrop-filter

<div class="container">
  <div class="box">
    A box!
  </div>
</div>

.box {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(4px);
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  color: white;
}

.container {
  align-content: center;
  justify-content: center;
  position: relative;
  height: 200px;
  width: 300px;
  background-image: url("https://placecats.com/300/200");
}

Run Pen

This Pen is owned by ernie on CodePen.

See more by @iernie on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.