How to use the Backdrop Filter Glassmorphism Effect

  • BdThemes
  • How to use the Backdrop Filter Glassmorphism Effect

Table Of Contents

Backdrop Filter (Glassmorphism Effect)

How to use the Backdrop Filter Glassmorphism Effect

The Backdrop Filter Glassmorphism effect is a CSS code that lets you introduce additional graphical properties such as blur, saturation, hue; to the background image on your webpage.

Element Pack recently added this feature inside its widgets and in the section columns of the Elementor page editor. Let’s take a look at how to use the Backdrop Filter in pages.

Add Backdrop Filter in seconds

inserting a widget to display the Backdrop Filter Glassmorphism Effect

Let’s take our User Login widget as an example to demonstrate this element glassmorphism effect. Open the Elementor editor page and insert this widget by searching in the widget menu.

1 1 - BdThemes

Go to the Additional settings tab and set a suitable content padding. Make sure to keep white areas around the content in order to view the filter effect perfectly.

2 - BdThemes

Now click on the section settings icon and move to the Background section under the Style tab. Please select an image of your choice, position it in the center, and make it a cover-sized image.

Here Comes The Magic!

3 - BdThemes

Click on the column or the User Login widget and go to Advanced Tab> Background. You will see the option Backdrop Filter below the background image option.

Click it and add blur effect, saturation, hue, brightness, contrast; on the content background over the section background to initiate the Backdrop Filter for Elementor.

4 - BdThemes

You will get a Glassmorphism Effect on your content. This effect is fully customizable and works with any kind of background. All widgets of Element Pack support this feature.

Conclusion

You can watch the video to get better visuals. To learn more about the filter, see the demo page provided by Bdthemes.

Thanks for your attention!

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge