How to apply a CSS blur filter to a background (not image)

Question

I got autocomplete dropdown filled with almost solid background colour

.Suggestions {
  text-align: left;
  position: absolute;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: rgba(235, 235, 235, 0.95);
  list-style: none;
  margin-top: -9px;
  max-height: 143px;
  overflow-y: auto;
  padding-left: 0;
  width: 406px;
}

covering other elements (buttons, inputs ...) when activated

DEACTIVATED

ACTIVATED

and I would like to make an effect similar to safari dropdown when clicked on url where everything behind is almost visible and also blurred.

Is there any way to do that in css? I know that I can create an image and then apply blur filter but the autocomplete is used in many screens with different background so creating image for each screen would be a mammoth task

Answer 1

  function myFunction() {
    var Textfield  = document.getElementById("Textfield");
   
    if (Textfield.value == "")
      document.getElementById("back_div").classList.remove("blur");
    else
      document.getElementById("back_div").classList.add("blur");

  }

 .blur {
      /* Add the blur effect */
      filter: blur(2.5px);
      -webkit-filter: blur(2.5px);
    }

  <input id="Textfield" onkeyup="myFunction()" type="text">
  <div id="back_div">test text</div>