Blurred modal background

How do you apply a webkit blur to a modal background without blurring the content?

try to add css filter to modal backdrop
filter: blur(3px);
also don’t forget prefixes for web-kit

added -webkit-filter:blur(3px) to the modal backdrop css though it blurs the content in the model rather than the background of the modal

can you create some codepen with your code?

The content within the modal is blurred instead of the background of the modal. i simply want to be able to blur the background and have content on top

I did actually achieve this with this class
.menu-blur {
-webkit-filter: blur(5px);
opacity: .3;
}

A few notes however: You need to apply it to an element that wraps all the content inside the ion-content. Applying it to the ion-content object doesn’t work correctly.

It also has a huge impact on performance, as good as it looks, I’d recommend against using this method. Even on the newest android phones and iPhones I had to disable it because everything would lag until it was all finished blurring.

So 1) Apply that class to the div and 2) make the modal background opaque. You can find the css in the ionic css to override for that.