[solved] Ion-backdrop with blur

Ionic Framework
1

Hi,

I’m trying to create an overlay on top of some ion-card content, with a blur effect.

It’s very simple to add a ion-backdrop component, but I can’t find any way to make it have a backdrop blur.
For example this:

<ion-backdrop class="backdrop"></ion-backdrop>

.backdrop {
  opacity: 0.8;
  background: white;
  backdrop-filter: blur(6px);
  --backdrop-filter: blur(6px);
}

will indeed make the overlay transparent white, but not blurry.

I have tried with some more “raw css” tricks like this one: html - How to overlay one div over another div - Stack Overflow but using position: relative; for my content screws the display completely.

Please note: I am not talking about an alert or a menu with backdrop. I just want to add a layer on top of the content, with blur effect, to kind of “randomize” it (of course I have already scrambled the text, it’s just a visual effect).

Would you have any advice on how to achieve this?

Thanks

2

Ok, I can answer my own question: I managed to implement the solution proposed in the above Stack Overflow link.
What I had to do, to allow the usage of position: relative, was to include all this into an extra ion-card-content element.