How do I blur the background after ion alert appears?

Ionic Framework Ionic Vue
1

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?

2

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

3

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.

2 Likes
4

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:
image

5

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

ion-alert.my-class {
  ...
}

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

1 Like
6

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