<div class="background-image">
   <div class="post-title">
      <h2>
         What exactly is a backdrop-filter?
      </h2>
      <p>
         Exploring the exciting new frontier in CSS image stylings.
      </p>
   </div>
</div>

* {
   box-sizing: border-box;
}

.background-image {
   padding: 4rem;
   display: flex;
   height: 100vh;
   width: 100vw;
   align-items: center;
   justify-content: center;

   background-image: url("https://safebooru.org//samples/3121/sample_d3bdd16b5cbeb77d40fb8969dbd350f3fe274d78.jpg?3248256");
   background-size: cover;
   background-position: center;
}

.post-title {
   padding: 1rem 3rem;

   text-align: center;

   border-radius: 0.75rem;
   background-color: rgba(220, 220, 255, 0.9);

   @supports (backdrop-filter: blur(5px)) {
      backdrop-filter: blur(6px) contrast(20%) brightness(160%);
      background-color: rgba(0, 0, 0, 0);
   }

   h2 {
      font-size: 2.4rem;
   }

   p {
      font-size: 1.2rem;
   }
}