---
title: "How to Add a Glassmorphism Effect in Elementor for FREE? (Frosted Glass Effect)"
url: https://theplusaddons.com/docs/glassmorphism-effect-in-elementor/
date: 2024-01-03
modified: 2026-09-19
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Add-a-Glassmorphism-Effect-in-Elementor-for-FREE_-Frosted-Glass-Effect-1024x536.jpg
word_count: 1045
---

# How to Add a Glassmorphism Effect in Elementor for FREE? (Frosted Glass Effect)

## 

- The Plus Addons for Elementor includes Glass Morphism as a free extension, and Elementor (free) is the only prerequisite named in the post.
- Glass Morphism adds a section to Elementor’s Advanced tab, not Widgets, and it appears only after The Plus Addons > Extensions is switched on.
- Glass Morphism uses two controls, Blur from 1 to 100 and Grayscale from 0 to 1, with defaults of 10 and 0; the post says there is no color, opacity, saturation, brightness, or hover control.
- Glass Morphism works on widgets and flexbox containers when the element has a semi-transparent background or no background and something is painted behind it, while a solid #FFFFFF background hides the effect completely.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/glassmorphism/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free** — **Glass Morphism** is part of the free The Plus Addons for Elementor plugin. Pro is not needed.- **Prerequisite:** [Elementor](http://wordpress.org/plugins/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**.

![Switching the Glass Morphism extension on under The Plus Addons > Extensions](https://theplusaddons.com/wp-content/uploads/2026/09/glassmorphism-activate.webp)

## 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.

![The Glass Morphism toggle, Blur and Grayscale controls on the Advanced tab](https://theplusaddons.com/wp-content/uploads/2026/09/glassmorphism-panel.webp)

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.

![The same card with Glass Morphism off and on at its default Blur of 10](https://theplusaddons.com/wp-content/uploads/2026/09/glassmorphism-result-on-off.webp)

Raising **Blur** to 50 softens the background far more than the default does:

![Blur 50 softens the background behind the card far more than the default](https://theplusaddons.com/wp-content/uploads/2026/09/glassmorphism-result-blur.webp)

Raising **Grayscale** to 1 takes all the colour out of the background showing through the glass:

![Grayscale 1 drains the colour out of the background showing through the glass](https://theplusaddons.com/wp-content/uploads/2026/09/glassmorphism-result-grayscale.webp)

## 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.

![A solid element background hides the effect; a semi-transparent one shows it](https://theplusaddons.com/wp-content/uploads/2026/09/glassmorphism-result-background.webp)

## 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.

## Related Docs

- [Neumorphism Shadow Effects in Elementor](https://theplusaddons.com/docs/neumorphism-effect-in-elementor/)- [How to add canvas background particles in Elementor](https://theplusaddons.com/docs/canvas-background-particles-js-particles-background/)

## Frequently Asked Questions

**Q: What do I need before adding a glassmorphism effect in Elementor?**
A: The key setup is simple: Elementor must be installed and active, and the Glass Morphism extension in The Plus Addons for Elementor must be turned on. The element also needs a semi-transparent background or no background at all, plus something painted behind it, like a parent container background image or colour. A solid background blocks the frosted look completely, so that part matters more than the sliders.

**Q: Why is the Glass Morphism section missing from the Advanced tab?**
A: That usually means the extension is still off. In The Plus Addons for Elementor, Glass Morphism lives under The Plus Addons > Extensions, not under Widgets. When it is disabled, the Glass Morphism section is not added to the Advanced tab and no CSS is written. That makes this a setup issue, not an Elementor bug.

**Q: How do I make a frosted glass effect work on a card with no background?**
A: A card can still frost what is behind it even if it has no background of its own. The important part is that something behind the element must be painted, such as a parent container background image or colour. The Plus Addons for Elementor applies the blur to whatever shows through the element, so an empty card can still produce the effect if there is real content behind it.

**Q: Why does my glassmorphism effect look invisible even though the toggle is on?**
A: The most common reason is a fully opaque element background. A solid colour like #FFFFFF hides the effect completely, even if Glass Morphism is enabled and Blur is set high. Another common cause is having nothing painted behind the element. For the frosted look to show up, the element needs either a semi-transparent background or no background, plus visible content behind it.

**Q: What Blur setting works best for a subtle frosted glass effect?**
A: The default Blur value of 10 is intentionally gentle, so it only softens the background a little. If you want a stronger frosted look, raise it toward 50, where the background becomes much more blurred. The Plus Addons for Elementor uses a 1 to 100 range here, so small changes can matter more than people expect.

**Q: Does glassmorphism in Elementor work on containers as well as widgets?**
A: It works on both. The same Glass Morphism section appears on a flexbox container and on widgets, and it frosts them in the same way. That makes it useful for either a single card or a larger layout block. The page also notes that this was tested on a widget and on a flexbox container only.