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:
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.
Ah thank you, I was wondering how to add a custom class.