<div class="bg">
  <div class="wrapper">
      <div class="hue120">
    hue rotate 120
  </div>
  <div class="hue240">
    hue rotate 240
  </div>
  <div class="hue360">
    hue rotate 360
  </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 */
.hue120 {
  backdrop-filter:
    hue-rotate(120deg);
  height: 75px;
  text-align: center;
  height: 209px;
  line-height: 209px;
  color: white;
  font-size: 1.5em;
  border-radius: 25px;
}

.hue240 {
  backdrop-filter:
    hue-rotate(240deg);
  height: 75px;
  text-align: center;
  height: 209px;
  line-height: 209px;
  color: white;
  font-size: 1.5em;
  border-radius: 25px;
}
.hue360 {
  backdrop-filter:
    hue-rotate(360deg);
  height: 75px;
  text-align: center;
  height: 209px;
  line-height: 209px;
  color: white;
  font-size: 1.5em;
  border-radius: 25px;
}