Streaming live at 10am (PST)

Blur background of popup model

Hey everyone,

I have a model that shows once a Floating Action Button (FAB) is clicked.
I am trying to make the background of the model (full height and width of viewport) blur so that the user is visually directed to focus on the model.


Here is my site Read-Only: https://preview.webflow.com/preview/fab-63f4ed?utm_medium=preview_link&utm_source=designer&utm_content=fab-63f4ed&preview=fb7818203d0044951ab86b0cfc639061&mode=preview

Any help would be great.

What I have tried so far.

  1. Applying a blur filter to the div with the class blur - Failed

  2. Added the below css class code to both the < /head > and before < /body > areas in the dashboard settings for the page.
    < style >
    .blur{

     filter: blur(5px);
     // Browser Specific
     -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
    

    }
    < /style >

  3. I also tried

    < style >
    .blur {

     -webkit-filter: blur(10px); 
        -moz-filter: blur(10px);
         -ms-filter: blur(10px);    
             filter: blur(10px);    
    

    }
    < /style >

Nothing so far has had the desired effect. I do not have a background image. It is the actual webpage behind the FAB model that I want to blur.

I see what you are trying to do.
Not sure but this video might explain how to do it.
youtube vid

This is the code he says to use.

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { .example-class { background-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }

That’s perfect thank you. Makes sense when you see it in action.