Alternative for backdrop-filter for Firefox

Question

I want all the components to blur out beneath the dialog box. The dialog box should not get blurred out.

I've tried couple of ways but i didnt achieve the desired result.

1. Tried using filter with pseudo element, it did blur out the background behind dialog but didn't blur the text beneath the background.

   *considering that all are different components.

   <text/>

   <background/> (it blurred its children and itself when i placed dialog inside it but the text didnt blur out).

   <dialog/>

2. I tried changing the order of components. Didnt work.

3. I have a question regarding how filter actually works? Does it gets applied to only the element i apply it on and its children? Or can I use it as a curtain which will cover everything that is placed below in the stacking order? If so can i change the order of it using z-index to change its stacking order?

Any help will be appreciated. Thanks.