---
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-06-15
lang: en
author: "Aditya Sharma"
description: "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..."
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: 364
---

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

## 

- Activates the Glass Morphism extension from The Plus Addons for Elementor to add a frosted glass effect.
- Adjusts the Blur and Grayscale settings in Elementor to customize the frosted glass effect.
- Requires Elementor FREE Plugin and The Plus Addons for Elementor plugin to implement the effect.

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

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

![Glass Morphism extension activation in The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2024/01/glass-morphism-1024x358.png)

## 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](https://theplusaddons.com/docs/canvas-background-particles-js-particles-background/).

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

![Glass Morphism settings in Elementor via The Plus Addons for Elementor](https://theplusaddons.com/wp-content/uploads/2024/01/glass-morphism-settings-new.png)

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.

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

For more design effect options, see [Neumorphism Shadow Effects in Elementor](https://theplusaddons.com/docs/neumorphism-effect-in-elementor/).