<div class="background">
  <div class="blur">backdrop-filter: blur(4px)</div>

  <div class="invert">backdrop-filter: invert(100%)</div>

  <div class="grayscale">backdrop-filter: grayscale(100%)</div>

</div>

.background > div.blur {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.background > div.invert {
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
}

.background > div.grayscale {
  -webkit-backdrop-filter: grayscale(100%);
  backdrop-filter: grayscale(100%);
}

.background {
  margin: 0 auto;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/demo1200-width2.jpg);
  width: 600px;
  background-size: cover;
  border-radius: 0.5em;
  padding: 1em;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2em;
  font: 140% system-ui, sans-serif;
}

.background > div {
  padding: 1.5em;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0.5em;
  width: 80%;
}