How to make the background of a page blurry only through a transparent div

July 8, 2023

I have the code for a web page where I would like the background to be blurry only through a transparent div. I essentially want to make the div translucent.

I tried to add the blur filter css for the div but that resulted in the text inside the div being blurred which I do not want.

<body style="background-image: url('bg.jpg')">
  <div>
    Some text
  </div>
</body>

>Solution :

Try the following, using the CSS backdrop-filter: blur property and changing the background-color opacity:

<head>
  <style>
    body {
      background-image: url('bg.jpg');
    }

    .translucent-div {
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      width: 300px;
      height: 200px;
      margin: 50px auto;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div class="translucent-div">
    Some text
  </div>
</body>