Elementor Glassmorphism Effects Extension

Master Addons introducing Glassmorphism effect extension that will enhance your website section’s background. There is two main option available for the Glassmorphism effect – Blur value & Color. Depending on your background object you have to wisely select a color and blur amount for the Glassmorphism effect.

There are two ways to add the Glassmorphism effect in elementor, first one is using Master Addons Glassmorphism extension and the second is Master Addons Custom CSS.

Elementor Glassmorphism Extension

First arrange your section with a nice background image and then drag and drop any element inside your column. I’ve inserted the Flipbox element by master Addons as a demo. Take a look at the following screenshot, try to arrange your section something like this.

elementor Glassmorphism effect

After arranging your section and elements. Just click on the element and navigate to advance tab. Inside the Advance tab, you will see “Background option”just click on this option and there you will see “enable Glassmorphism option”. 

Enable Elementor Glassmorphism extension

After enabling the Glassmorphism make sure to select a transparent color so that you can see the blur effect properly. If you don’t select a transparent background color, then you will not see the glassmorphism effect.

Glassmorphism effect in background image

Glassmorphism Effect using Custom CSS in Elementor

The first process is same. You have to arrange your section background and element properly. 

First, visit glassmorphism.com. You will see something like the following screenshot. Just customize the blur, transparency, color, outline on your demand. Now hit a click on “COPY CSS” button.

Glassmorphism custom CSS

Now navigate to your Elementor section. Click on the desired element. Navigate to advance tab and search for “Custom CSS” extension by Master Addons. Type selector {}. Paste your CSS code inside the second bracket like the following screenshot. After pasting the code, you will get an instant output. Just save and update your page. 

Glassmorphism using Master Addons custom CSS

That’s all about the Elementor Glassmorphism effect using Extension and Custom CSS. Feel free to use any method that suits properly on your demand. If you face any problem get in touch with us and we will try our best to assist you.