JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter"></div>
<div class="img"></div>

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  
  --bg: url('https://source.unsplash.com/random') no-repeat center/cover;
}

.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.img {
  position: relative;
  height: 100%;
  width: 50%;
  background: var(--bg);
}