Modal Popup Can I Blur the web page background content?

Hello, I tried looking at the sub classes but could not find anything. What I would like to do it blur the webpage out. Can this be done.


Hi @calibinder. Something like this?

Yes Jerry like that, thank you. Found some of the classes will try to work it out. Still looking to blur background, need to get used to the Blocs structure but glad to see it is using standard names.

Thank You

Try this, you can set a color and blur

.modal {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);


Thank you chicuelo

Thank you it worked perfectly and the background it blurred when the modal pops up.

I used this one and also made the class in the Class Manager and then set the background color there and adjusted the opacity with the code below.

.modal-backdrop { opacity: 0.9 !important; }

Happy Easter


That’s a useful bit of code.
Thanks @chicuelo

1 Like

@calibinder @apswoodwork Some browsers have no support for this filter, such as firefox so it wouldn´t be rendered, maybe in near updates it comes with support.

1 Like

Hi @calibinder
Where is the opacity code added?

Hi @apswoodwork, I think its the ‘.6’ in @chicuelo’s code, the rgba being red, green, blue and an alpha (opacity) value, so if you want it more opaque, change to @calibinder’s ‘.9’.

1 Like

Yep @TrevReav
That’ll do nicely.