What is the Glassmorphism effect?
The Glassmorphism effect is a modern background style available in the MA Background extension of Marquee Addons Pro. It applies a frosted-glass appearance to an Elementor Container by combining background blur, transparency, and subtle texture. This creates the illusion of glass layered over content, allowing background elements to remain visible while keeping foreground content clear and readable.
With multiple presets such as Light Frost, Heavy Frost, Soft Mist etc. you can control how strong or subtle the glass effect appears—without using custom CSS or complex filters.
Common use case
A common use case for the Glassmorphism effect is creating card-style layouts on landing pages. Applying a frosted-glass background to feature cards, pricing boxes, or signup forms helps separate content from the background while maintaining a clean, modern look that feels lightweight and premium.
Additional use cases
- Hero overlays: Place glass panels over images or videos to highlight headlines and CTAs.
- Dashboard-style layouts: Create UI-style sections for SaaS or admin-style pages.
- Popups and modals: Improve readability while keeping the background context visible.
- Navigation panels: Add a translucent glass effect to menus or sidebars for a modern UI feel.
Requirements
To use Glassmorphism, you need to have the following:
- You need the Marquee Addons Pro plugin installed and activated on your website.
- You can find detailed installation instructions in our installation guide.
- Make sure that this addon is enabled so you can find it in the Elementor editor.
- Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.
Add the extension
The Glassmorphism isn’t a standalone widget; it is an enhancement found within the settings of any Container.
- Open your Elementor editor and select an existing Container or drag a new one onto the canvas.
- Go to the Style Tab in the panel.
- Locate the section labeled MA Background.
- Toggle the Background Effects dropdown to choose Glassmorphism.
Video Tutorial for Glassmorphism effect
See a video demonstrating the effect in action.
Settings for the Glassmorphism effect
All Glassmorphism controls are located in the Style tab of the selected Container.
- Background Effects: Select Glassmorphism to enable the frosted-glass background effect for the Container.
- Effects: Choose the glass style preset to control the intensity and texture of the blur effect:
- Glass Frost – A balanced glass look with moderate blur and transparency. Works well for cards and content blocks.
- Light Frost – Minimal blur that keeps the background more visible. Ideal for subtle overlays.
- Grain Frost – Adds a light grain texture for a slightly textured, modern glass feel.
- Fine Frost – Smooth and refined blur, perfect for clean and minimal UI designs.
- Heavy Frost – Strong blur and opacity for maximum contrast and content focus.
- Soft Mist – A gentle, airy blur that creates a soft, premium glass appearance.
