JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div><p>blur</p></div>
  <div><p>brightness</p></div>
  <div><p>contrast</p></div>
  <div><p>grayscale</p></div>
  <div><p>invert</p></div>
  <div><p>opacity</p></div>
  <div><p>saturate</p></div>
  <div><p>sepia</p></div>
  <div><p>hue-rotate</p></div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
}

p {
  backdrop-filter: blur(10px);
  background-color: rgba(228, 228, 228, 0.8);
  text-box-trim: trim-both;
  display: inline-block;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
}

section {
  background-image: url(https://fastly.picsum.photos/id/106/2592/1728.jpg?hmac=E1-3Hac5ffuCVwYwexdHImxbMFRsv83exZ2EhlYxkgY);
  aspect-ratio: 1;
  width: 80vh;
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

div {
  padding: 8px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

div:nth-of-type(1) {
  backdrop-filter: blur(10px);
}

div:nth-of-type(2) {
  backdrop-filter: brightness(150%);
}

div:nth-of-type(3) {
  backdrop-filter: contrast(150%);
}

div:nth-of-type(4) {
  backdrop-filter: grayscale(150%);
}

div:nth-of-type(5) {
  backdrop-filter: invert(150%);
}

div:nth-of-type(6) {
  backdrop-filter: opacity(0.6);
}

div:nth-of-type(7) {
  backdrop-filter: saturate(200%);
}

div:nth-of-type(8) {
  backdrop-filter: sepia(150%);
}

div:nth-of-type(9) {
  backdrop-filter: hue-rotate(50deg);
}