JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
  <div class="blur-background">
    This div has a blurred background.
  </div>
</body>
</html>

CSS

body {
  font-family: "Helvetica", sans-serif;
  width: 100%;
  height: 100%;
  background-image: url('https://i.imgur.com/CFWQ4FO.jpg');
  background-size: cover;
}

.blur-background {
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 40%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
  -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
  
  animation-name: a;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes a {
  0% {
    left: 10%;
    right: 40%;
  }
  100% {
    left: 40%;
    right: 10%;
  }
}