How do I blur the background after ion alert appears?

I am reading the ion alert documentation and I managed to replicate the ion alert in my app:

However, in this documentation all I can do to the background is set the opacity. I would like the background to also blur a little. How can I achieve this?

Likely the alert uses ion-backdrop

And unfortunately it does not have options to stylize the shadow parts or properties - so from the face of it I wonder how to do this

You can use CSS backdrop-filter:

ion-alert {
  backdrop-filter: blur(20px);

You can also set a transition to make it animate, but just be aware that backdrop-filter will cause a re-paint every frame which can lead to some performance issues.


Thanks Idebeasi and Tommertom. How can I set a transition for fade in and fade out? Also I have this in variables.css (Ionic Vue) and sometimes i need !important on it in order for it to take effect. Not sure if this is best practice:

I recommend adding a class to the alert and targeting that to increase the specificity. {

As for the transition, this CSS Transitions guide may help you here.

1 Like

Ah thank you, I was wondering how to add a custom class.