<div class="bg">
  <div class="wrapper">
      <div class="sepia">
    Sepia
  </div>
  <div class="grayscale">
    Grayscale
  </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');
  background-size:cover;
}

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

/* the effect */
.sepia {
  backdrop-filter:
    sepia(1);
  height: 75px;
  text-align: center;
  height: 209px;
  line-height: 209px;
  color: white;
  font-size: 1.5em;
  border-radius: 25px;
}

.grayscale {
  backdrop-filter:
    grayscale(1);
  height: 75px;
  text-align: center;
  height: 209px;
  line-height: 209px;
  color: white;
  font-size: 1.5em;
  border-radius: 25px;
}