Are you looking to add a frosted glass effect in Elementor? The glassmorphism effect creates a blurred, translucent appearance on any element, giving the impression of layered glass floating over a background image or color.
With the Glass Morphism extension in The Plus Addons for Elementor, you can add a frosted glass effect to any Elementor widget without writing custom CSS.
Best Used For:
- Agency and design portfolio sites that use layered background images and want a translucent card overlay effect
- Landing pages with hero sections where widgets or cards appear to float over a background
- WooCommerce product showcases that need a modern glassmorphism style on product cards or banners
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- Make sure the Glass Morphism extension is activated, to verify this, visit The Plus Addons → Widgets → and Search for Glass Morphism and activate.
How to Activate the Glass Morphism Extension?
To get started with Elementor Glassmorphism, go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Key Features
- Add a frosted glass effect – Apply a glassmorphism effect to any Elementor widget to create a translucent appearance over background images or colors. Use this when you want UI cards or containers to blend into a layered background rather than appear as solid blocks.
For a different type of animated background effect, see how to add canvas background particles in Elementor.
How to Add Frosted Glass Effect in Elementor?
Once the Glass Morphism extension is activated, add any widget or a container inside a container or column, then follow these steps.
1. Add a background image to the parent container or the column and make the necessary adjustments.
2. Then select the widget and go to Advanced > Glass Morphism.
3. Turn on the Glass Morphism toggle.
From the Blur section, adjust the strength of the frosted glass effect. From the Grayscale section, control the color saturation level of the frosted glass area.
The widget will now display a frosted glass appearance behind your content.
For more design effect options, see Neumorphism Shadow Effects in Elementor.
