Elementor Popup Blur Background with Simple CSS

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:

selector{
     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!