A glassmorphism effect blurs whatever sits behind an element, so the element reads as a sheet of frosted glass floating over the background.
Glass Morphism in The Plus Addons for Elementor is an extension, not a widget. Once it is switched on it adds a Glass Morphism section to the Advanced tab of your Elementor elements, so you can frost a widget or a container without writing any CSS.
Requirement – This extension is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — Glass Morphism is part of the free The Plus Addons for Elementor plugin. Pro is not needed.
- Prerequisite: Elementor (free) installed and active.
- Extension to enable: Glass Morphism, under The Plus Addons > Extensions — not under Widgets. With it off, the Glass Morphism section does not appear on the Advanced tab at all.
- Prerequisite: the element must have a semi-transparent background, or no background. A solid colour hides the effect completely.
- Prerequisite: something must be painted behind the element — a parent container background image or colour — or there is nothing to frost.
Switch the Glass Morphism extension on
The extension is off by default, and while it is off the Glass Morphism section does not appear on the Advanced tab at all.
- In your WordPress admin, go to The Plus Addons > Extensions. It is Extensions, not Widgets — searching the Widgets tab for Glass Morphism returns nothing.
- Search for Glass Morphism and turn its toggle on. The card is marked FREE.
Add the frosted glass effect
- Edit your page with Elementor. Give the parent container a background image or colour, so there is something for the glass to frost.
- Select the element you want to frost — any widget, or a container — and make sure its own background is semi-transparent or empty.
- Open the Advanced tab and find the Glass Morphism section. It sits between Custom CSS and Display Condition.
- Turn on the Glass Morphism toggle inside Advanced > Glass Morphism. Two sliders appear below it.
- Drag Blur to set how strongly the background behind the element is softened, and Grayscale to drain colour out of it.
That is the whole extension. There is no colour, opacity, saturation, brightness or hover control — three settings and nothing else.
Settings
| Setting | What it does | Default |
|---|---|---|
| Glass Morphism | Switches the frosted glass effect on for this element. The two sliders below it only appear when this is on. | Off |
| Blur | How strongly the background showing through the element is blurred, in pixels. Range 1 to 100. | 10 |
| Grayscale | How much colour is drained out of the background showing through the element. 0 leaves it as it is, 1 makes it fully grey. Range 0 to 1. | 0 |
How It Behaves
The following was measured on the front end, on a page with two containers carrying a tiled background image and cards with a semi-transparent white background.
- Off versus on. With the toggle off nothing changes at all. With it on at the defaults the tiled background behind the card is visibly softened.
- Blur is deliberately gentle at its default. At the default of 10 the background behind the card is only slightly softened; at 50 it is blurred heavily.
- Grayscale affects what shows through, not the glass itself. At 1 the background visible through the element goes completely grey. Its scale is 0 to 1 — not a percentage and not pixels.
- It works on containers as well as widgets. The same section appears on a flexbox container and frosts it in the same way.
- The element does not need a background of its own. A card with no background at all still frosted what was behind it.
Raising Blur to 50 softens the background far more than the default does:
Raising Grayscale to 1 takes all the colour out of the background showing through the glass:
Limitations
- A fully opaque element background hides the effect completely. This is the one to watch. A card with a solid #FFFFFF background, Glass Morphism on and Blur at 50, renders exactly the same as with the effect removed. The panel gives you no hint that anything is wrong. Give the element a semi-transparent background, or no background, and it works.
- The blur comes from what is behind the element. If nothing is painted behind it, there is nothing to frost and you see no difference.
- There is no colour, opacity, saturation, brightness or hover control. Anything beyond blur and grayscale has to come from the element’s own Background and Border settings.
- Neither slider is responsive. You cannot set a different Blur or Grayscale per device from this section.
- The generated CSS is marked
!important. If your theme or your own custom CSS sets a backdrop filter on the same element or its wrapper, it will not win.
Not verified
So you know exactly what has and has not been checked:
- Browsers. The effect was only exercised in Chromium. Safari, Firefox and older browsers were not tested, so cross-browser behaviour is not claimed here.
- Legacy Sections and Columns. The effect was tested on a widget and on a flexbox container only.
- Mobile and responsive viewports. Not tested.
- Performance. The cost of a large blurred area was not measured.
- Other effects. How this interacts with Elementor’s Background Overlay and CSS Filters, or with other The Plus Addons extensions, was not tested.
- The Elementor editor preview. The controls were confirmed in the editor, but the frosted result was measured on the front end.
Troubleshooting
There is no Glass Morphism section on the Advanced tab
The extension is off. Go to The Plus Addons > Extensions, search for Glass Morphism and turn the toggle on. While it is off the section is not added to the Advanced tab and no CSS is written. If you were looking under The Plus Addons > Widgets, that is the wrong screen.
The toggle is on but nothing looks different
Two likely causes. First, the element’s own background is a solid colour — make it semi-transparent, or remove it. Second, nothing is painted behind the element — give the parent container a background image or colour.
The effect is there but far too subtle
The default Blur of 10 is deliberately gentle. Raise it; the scale runs to 100.
