<div class="bg">
  <div class="wrapper">
      <div class="blur-contrast-saturate">
    blur-contrast-saturate
  </div>
    </div>
</div>

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}

.bg{
  width: 100%;
  height: 100%;
  background-image: url('https://images.pexels.com/photos/2130134/pexels-photo-2130134.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
}

.wrapper {
  position: absolute;
  width: 300px;
  left: calc(50% - 150px);
  top: 2%;
}

/* the effect */
.blur-contrast-saturate {
  backdrop-filter:
      invert(100%) ;
  height: 75px;
  text-align: center;
  height: 209px;
  line-height: 209px;
  color: white;
  font-size: 1.5em;
  border-radius: 25px;
}