JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
    <div class="divbox">
    test
    </div>
  </div>
</div>

CSS

body{
  background-color: #fff;
}
.container{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://images.unsplash.com/photo-1483519396903-1ef292f4974a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}

.box{
  width: 200px;
  height: 300px;
  backdrop-filter: hue-rotate(190deg);
}

p{
  color: #f00;
  border: #f00 solid 1px;
}

.divbox{
  width: 20px;
  height: 20px;
  background-color: #f00;
  padding: 20px;
}