July 27, 2023

Elementor Popup Blur Background with Simple CSS

Play Video

Create an Elementor Popup Blur Background with a little bit of CSS. Wicky Design will show you how you can make your popup background less distracting, so your users can focus on what’s important.

Why Blurring the Background in Popups Matters

Imagine you’re trying to focus on something, but there’s a lot of background noise. It’s hard to concentrate, right? That’s exactly how your website visitors might feel when a popup appears, and the background remains sharp and distracting.

By creating a blur effect on the background of your popups, you help your visitors focus on the popup content, making it more likely for them to engage with it.

Setting Up the Elementor Popup

Before we get into the CSS code, let’s make sure we’re on the same page about setting up a popup in Elementor.

  1. Open your Elementor editor and navigate to the popup template you’re working on.
  2. Look for the button in the bottom left corner that says ‘Settings’. This is where you’ll find all your popup settings.

Assigning a Background Overlay

Next, we need to assign a color as a background overlay. Here’s how:

  1. Under ‘Settings’, navigate to ‘Style’ and then ‘Overlay’.
  2. Assign a color for your background overlay. For a transparent black background, you can use the color code #000000 and adjust the opacity to your liking.

Adding the Popup Blur Background CSS Code

Now, let’s get to the fun part – adding the CSS code that will blur the background. Here’s the CSS code we’ll use:

     backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

This code tells the browser to apply a blur effect of 10 pixels to the background. The second line is for Safari and other web browsers that use Webkit for rendering.

Customizing the Blur Effect

The beauty of this CSS code is that you can easily adjust the blur effect. If you want a less pronounced blur, you can change the pixel values in the CSS code. Here’s how:

  1. In the CSS code, change the pixel values in the parentheses. For example, if you want a softer blur, you can change ’10px’ to ‘5px’.
  2. Remember to change the pixel values in both lines of the code to keep the effect consistent across all browsers.

Saving and Testing the Popup

Once you’ve added and customized the CSS code, it’s time to save your changes and test the popup. Here’s how:

  1. Click ‘Update’ to save your changes.
  2. Navigate to a page where your popup is set to appear and trigger it. You should now see your popup with a beautifully blurred background!

Elementor Popup Blur Background – Conclusion

And that’s a wrap! You now know how to create an Elementor popup blur background using a simple CSS code. It’s a small change, but it can make a big difference in how your visitors perceive and interact with your popups. So, go ahead and give it a try. Happy blurring!

Required Resources

Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Elementor Popup Blur Background with Simple CSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.