Want to add a modern frosted glass effect to your Elementor sections, columns, or widgets? The Glassmorphism extension in aThemes Addons Pro lets you apply glass-like blur and grayscale effects to any element – giving your pages a sleek, contemporary look.
In this guide, we’ll walk you through how to use the Glassmorphism extension in aThemes Addons Pro for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. For premium widgets, ensure aThemes Addons Pro is also installed and active.
This extension requires aThemes Addons Pro.
Activating the Extension
Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for the Glassmorphism extension and toggle it on to activate it.
Enabling Glassmorphism
Open the Elementor editor and select the section, column, or widget you want to apply the effect to. Go to the Advanced tab and find the Glassmorphism section. Toggle Enable Glassmorphism to turn on the frosted glass effect for that element.
Configuring Glassmorphism Options
Once enabled, adjust the following settings to fine-tune the glass effect:
- Blur – Control the blur intensity of the frosted glass effect. Values range from 0 to 20, with a default of 5 and a step of 0.5. Higher values produce a stronger blur.
- Grayscale – Apply a grayscale filter to the element. Values range from 0% to 100%, with a default of 0% and a step of 1%. Increase this to desaturate the content behind the glass effect.
Experiment with different combinations of blur and grayscale values to achieve the exact frosted glass look you want. The effect works best when the element has a semi-transparent background, allowing the content behind it to show through with the blur applied.
That’s it! You’ve successfully applied a glassmorphism effect to your Elementor elements using the Glassmorphism extension in aThemes Addons Pro.
Next, would you like to add dynamic animations to your widgets? Check out our guide on Using the Animation Effects Extension to learn more.
