JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>


<button onclick="Clicked()">Blur Me (:</button>
<script>
function Clicked() {
  var el = document.getElementById('el');
  
  el.innerHTML = ":O";
  el.classList.add('changeState');
}
</script>

<p id="el"></p>

</body>
</html>

CSS

body{
background-image: url("https://i.pinimg.com/originals/d2/64/ce/d264ce996ff6531fe191dfce5b200b3a.jpg");
background-position: center; 
background-repeat: no-repeat;
background-color:yellow;
}

#el{
position:fixed;
top:14px;
left:14px;
right:14px;
bottom:14px;

-webkit-transition: all 7s;
-moz-transition: all 7s;
-o-transition: all 7s;
transition: all 7s;


}

#el.changeState{
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
}