backdrop-filter and CSS implementation

I'd like to create a translucent menu that has a blur effect i.e. it blurs whatever is behind it when it's extended into the screen (something similar to the Calculator on Windows 10).

Is there something similar to backdrop-filter/-webkit-backdrop-filter (an experimental CSS property that applies filters to elements below the targeted element) for Outsystems which would allow an element to blur all other elements behind it?

Hi Ethan Kok,

As far I know there is not (a default property to do that). But you can edit CSS and apply to your elements any class, or create a widget that has a specific behavior.

Regards.

Not sure if I understand what you mean, but you could try using opacity or rgba?

I also made a little fiddle to see if I understand what you're getting at.
I'm using mix-blend-mode: overlay; to allow content of elements to overlap on multiple layers.
Then I'm using filter: blur(4px); to blur the background div.

https://jsfiddle.net/z3kdjeug/1/

Joey Moree wrote:

Not sure if I understand what you mean, but you could try using opacity or rgba?

I also made a little fiddle to see if I understand what you're getting at.
I'm using mix-blend-mode: overlay; to allow content of elements to overlap on multiple layers.
Then I'm using filter: blur(4px); to blur the background div.

https://jsfiddle.net/z3kdjeug/1/

Yes; something along those lines. Except that I'm developing a mobile app, and in the mobile app, the sidebar/menu (which slides out from the left) is what I want to blur the elements in the background. Given that the menu doesn't cover the entire screen, is it possible for me to design something similar that only blurs the area of the screen the menu covers?


Basically what I want is a sort of translucent menu which blurs anything under it when it slides out, if that makes any sense?