Elementor: How To Add Blur Effect With CSS Only — Blurred Background Popup Overlay

It’s good for Popups and other elements as well. Feel free to modify the blurriness to your taste.

IMPORTANT
Because backdrop filter blur effectis is heavy, don’t add motion effects on popup entrance, unless fade in and fade out (recommended duration is 0.3 s). 

If the performance on mobile is poor, disable the CSS for mobile. Use this code to disable.

				
					selector { backdrop-filter:blur(5px); }
				
			

Just in case that it doesn’t work, try to to add ‘webkit’ version:

				
					selector { backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
				
			
  • Video ·

YotuWP: Custom CSS

DESCRIPTION Go to Dashboard > Appearance > Customize and add this custom CSS. CODE DARK…

Hi, there!
I'm a popup example.

Do you see how the background is blurred? Do you like it? Simply copy the code and paste it on your own popup custom CSS.