---
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-04-10
author: "Aditya Sharma"
description: "Are you looking to add a frosted glass effect in Elementor? The glass morphism effect adds a modern and sleek look to any element on a website. This effect creates..."
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: 285
---

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

## Key Takeaways

- Glass Morphism extension from The Plus Addons for Elementor allows users to add a frosted glass effect to any widget.
- Users must have The Plus Addons for Elementor plugin installed and activated to utilize the Glass Morphism effect.
- The frosted glass effect can be customized by adjusting the Blur and Grayscale settings in Elementor.

Are you looking to add a frosted glass effect in Elementor? The glass morphism effect adds a modern and sleek look to any element on a website. This effect creates a sense of depth and transparency, making elements appear like they are made of frosted glass.

With the Glass Morphism extension from The Plus Addons for Elementor, you can easily add a frosted glass effect in Elementor.

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

## Required Setup

- [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](http://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) 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.**

![](https://theplusaddons.com/wp-content/uploads/2024/01/glass-morphism-1024x358.png)

## Key Features

- **Add frosted glass** **effect** - You can easily add a frosted glass effect on any widget.

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

![](https://theplusaddons.com/wp-content/uploads/2024/01/glass-morphism-settings-new.png)

From the **Blur** section, you can adjust the frosted glass effect Elementor and from the **Grayscale** section, you can adjust the frosted glass area’s color saturation level. 

Now, you’ll see a beautiful frosted Elementor glass effect behind your content.

![glass morphism demo](https://theplusaddons.com/wp-content/uploads/2024/01/glass-morphism-demo.png)

If you're interested in exploring more design enhancements, check out our doc post on "[Neumorphism Shadow Effects in Elementor](https://theplusaddons.com/docs//neumorphism-effect-in-elementor/)".

## Frequently Asked Questions

**Q: What should I do if the Glass Morphism effect isn't showing up in Elementor?**
A: If the Glass Morphism effect isn't visible, ensure that the extension is activated. Go to The Plus Addons u2192 Widgets and search for Glass Morphism to turn on the toggle. If it's activated and still not working, check if the parent container has a background image set, as the effect relies on this for visibility.

**Q: Can I use the Glassmorphism effect with any Elementor widget?**
A: The Glassmorphism effect can be applied to any widget or container within Elementor. This flexibility allows you to enhance various elements on your website, giving them a modern frosted glass appearance. Just ensure that the Glass Morphism extension from The Plus Addons for Elementor is activated first.

**Q: What settings work best for achieving a strong Glassmorphism effect?**
A: For a pronounced Glassmorphism effect, adjust the Blur and Grayscale settings in the Advanced section after enabling the Glass Morphism toggle. Increasing the blur will enhance the frosted appearance, while adjusting the grayscale can modify the color saturation of the area, allowing for a more customized look.

**Q: Are there any limitations to using the Glass Morphism effect in Elementor?**
A: One limitation of the Glass Morphism effect is that it requires a background image on the parent container or column to function properly. Without a background image, the frosted glass effect won't be visible. This means careful planning of your layout is essential to ensure the effect displays as intended.

**Q: What happens if I forget to activate the Glass Morphism extension?**
A: If you forget to activate the Glass Morphism extension, you won't be able to apply the frosted glass effect to your widgets. This step is crucial, as the effect is only available once the extension is turned on in The Plus Addons u2192 Widgets menu.

**Q: Does the Glassmorphism effect work on mobile devices?**
A: The Glassmorphism effect is designed to work across all devices, including mobile. However, it's important to test the appearance on different screen sizes to ensure that the effect maintains its visual integrity and doesn't hinder usability or readability.