---
title: "Glassmorphism in 2026: How to Build Frosted Glass UI (CSS + Elementor)"
url: https://theplusaddons.com/blog/glassmorphism/
date: 2026-08-20
modified: 2026-08-20
lang: en
author: "Aditya Sharma"
description: "There is a specific kind of frustration that comes with glassmorphism. You write the CSS, reload the page, and nothing happens. No blur, no glass. The element just sits there,..."
image: https://theplusaddons.com/wp-content/uploads/2024/07/Feature-Elementor-GlassMorphism-1-1024x536.jpg
word_count: 3001
---

# Glassmorphism in 2026: How to Build Frosted Glass UI (CSS + Elementor)

## 

- MDN describes backdrop-filter as a common source of confusion when it appears to have no visible effect despite being correctly applied, so the property is usually not broken when glassmorphism fails.
- Glassmorphism uses four ingredients together: backdrop blur, a semi transparent background, a 1px translucent white border, and a soft shadow.
- The CSS example sets blur(16px), rgba(255, 255, 255, 0.15), border-radius: 16px, and box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), with both -webkit-backdrop-filter and backdrop-filter declared.
- The three main failure modes are using filter instead of backdrop-filter, giving the element an opaque background, or placing it inside an ancestor that creates a backdrop root such as opacity less than 1, mask-image, clip-path, or mix-blend-mode.
- The Plus Addons for Elementor includes a free Glass Morphism extension that is enabled from The Plus Addons > Widgets, then configured in Advanced > Glass Morphism with Blur defaulting to 10 and Grayscale to 0.

There is a specific kind of frustration that comes with glassmorphism. You write the CSS, reload the page, and nothing happens. No blur, no glass. The element just sits there, flat.

MDN documents this exact scenario. It describes the cause as *"a common source of confusion when `backdrop-filter` appears to have no visible effect despite being correctly applied."* The property is not broken. The problem is almost always somewhere else on the page.

That gap is the reason for this guide. Most glassmorphism tutorials hand you four lines of CSS and stop there. This one gives you the code, then covers the three reasons it fails silently, how to keep text on glass readable, and how to build the same effect in Elementor without opening a stylesheet.

 

Table Of Contents

 

![Glassmorphism applied to an Elementor hero section, with frosted translucent panels over a background image](https://theplusaddons.com/wp-content/uploads/2024/07/Elementor-Glassmorphism-in-Hero-Section.png)A hero section using frosted panels over a background image. The blur is doing the work, not a solid overlay.

## What Glassmorphism Actually Is

Glassmorphism is a visual style where an element behaves like a pane of frosted glass. Whatever sits behind it stays visible but blurred, so the panel reads as a translucent layer floating above the page rather than a solid box drawn on top of it.

The style depends on one CSS property that did not have broad browser support until fairly recently. Before `backdrop-filter`, faking frosted glass meant duplicating the background image inside the panel and blurring the copy, which broke the moment anything moved or scrolled.

### Why the Style Came Back

Apple put the style back on every designer's screen. On June 9, 2025 it introduced a new design material called **Liquid Glass**, describing it as a *"translucent material reflects and refracts its surroundings, while dynamically transforming."* Apple shipped it across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26.

Worth being clear about what that does and does not mean for the web. Apple's implementation uses real time rendering with specular highlights, which is well beyond what a stylesheet does. What you can reproduce in CSS is the frosted, translucent part of the look. The reflection and refraction are not available to you as a single CSS property.

## The Four Ingredients of a Glass Surface

Every convincing glass panel is a combination of four things. Drop any one of them and the effect stops looking like glass.

- **A backdrop blur.** Per MDN, `backdrop-filter` *"lets you apply graphical effects such as blurring or color shifting to the area behind an element."* This is the property doing the actual work.- **A semi transparent background.** The glass surface itself, usually a white or dark fill at low opacity.- **A hairline border.** A 1px translucent white border reads as the lit edge of a physical pane. Without it the panel looks undefined.- **A soft shadow.** This separates the panel from the layer behind it and gives the depth cue that makes it float.

In CSS, that is this:

`.glass {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}`

![Blurred frosted glass effect applied to an Elementor container](https://theplusaddons.com/wp-content/uploads/2024/07/Blur-Frosted-Glass-Effect-in-Container.png)The same four ingredients applied to a container. Note the visible edge, which is what stops the panel looking like a flat wash.

A note on the blur value. Very low values read as a smudge rather than glass, and very high values turn the backdrop into a flat wash of color that removes the reason for the effect in the first place. Somewhere in the mid teens is a sensible starting point, then adjust against your own background.

The `-webkit-` prefixed line is not redundant. WebKit shipped this property behind the prefix, and the unprefixed version is still being fully unprefixed there, so declaring both is the safe choice.

## Why Your Blur Is Not Showing: Three Failure Modes

This is the section most tutorials skip, and it is where nearly every real glassmorphism problem lives. If your CSS looks right and the effect is missing, it is almost certainly one of these three.

### 1. You Used filter Instead of backdrop-filter

These two properties sound interchangeable and do completely different jobs. `filter: blur()` blurs *the element itself*, including every piece of text inside it. `backdrop-filter: blur()` blurs what is *behind* the element and leaves the content sharp.

If your panel went blurry along with its own heading, you reached for the wrong one.

### 2. Your Element Is Not Transparent

MDN is direct about this one: *"Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent."*

A fully opaque background hides the blurred pixels you just spent effort producing. The blur is being computed and then covered up. This is why a solid `background: #fff` and a backdrop filter on the same element gets you a plain white box.

### 3. An Ancestor Created a Backdrop Root

This is the invisible one, and the reason so many people conclude the property is buggy. `backdrop-filter` only blurs pixels up to the nearest ancestor that is a **backdrop root**. Content above that boundary is never touched.

MDN spells out the consequence: if a parent has `opacity: 0.9`, that parent becomes a backdrop root, and a child's `backdrop-filter` *"will only blur the content between that parent and the child, not the content behind the parent."* Your element dutifully blurs a region that contains nothing, and you see no change at all.

Any ancestor carrying one of these will create that boundary:

- `filter`- `opacity` less than 1- `mask`, `mask-image` or `mask-border`- `clip-path`- `backdrop-filter`- `mix-blend-mode`- `will-change` set to certain values

The fix is to walk up the DOM from your glass element and remove whichever of those an ancestor is carrying. The usual culprit is a wrapper someone set to `opacity: 0.99` to force GPU rendering, or an animation library that left `will-change` behind. If you are debugging a page where styles are behaving in ways you cannot account for, our guide on [why an Elementor page loads without styling](https://theplusaddons.com/blog/elementor-page-loads-unstyled/) covers the wider class of problem.

## A Copy-Paste Glass Card

Here is a complete, working glass card with a graceful fallback. The `@supports` block matters: browsers without backdrop filter support get a more opaque background so the text stays readable instead of sitting on near transparent nothing.

`.glass-card {
/* fallback first, for browsers with no support */
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
padding: 2rem;
color: #10121a;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-card {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(16px) saturate(150%);
backdrop-filter: blur(16px) saturate(150%);
}
}`

Two details are doing real work here. The fallback background is set *first* and then overridden inside the `@supports` block, so no browser is ever left without a readable surface. And `saturate(150%)` is added alongside the blur, because blurring alone tends to wash out the colors behind the panel. Pushing saturation back up keeps the backdrop looking alive.

One requirement that is easy to miss: glass needs something behind it. On a flat white page the effect is invisible no matter how correct the CSS is. Place the card over a photograph, a gradient or a colorful shape.

If you want this in WordPress and are comfortable in a stylesheet, our walkthrough on [how to add custom CSS in Elementor](https://theplusaddons.com/blog/add-custom-css-in-elementor/) shows where the code belongs so it survives updates.

## How to Add Glassmorphism in Elementor Without Code

If you would rather not maintain custom CSS across a site, The Plus Addons for Elementor ships this as a built in extension, documented as a free feature. The only prerequisites listed are the free Elementor plugin and The Plus Addons for Elementor itself. It applies to any section, column or widget, so you are not limited to a single card component.

The setup, per the official documentation:

- Enable the **Glass Morphism** extension from **The Plus Addons > Widgets**.- Give the parent container or column a **background image**. This is the layer that will show through, and skipping it is the most common reason the result looks like nothing happened.- Select the widget you want to frost, then open **Advanced > Glass Morphism**.- Turn the **Glass Morphism** toggle on.- Use **Blur** to set the strength of the frosted glass effect, and **Grayscale** to control the color saturation level of the frosted area.

![Elementor Advanced tab showing the Glass Morphism section with the Enable toggle, Blur slider set to 10 and Grayscale slider set to 0](https://theplusaddons.com/wp-content/uploads/2024/01/glass-morphism-settings-new.png)The Glass Morphism section sits near the bottom of the Advanced tab. Blur defaults to 10 and Grayscale to 0.

The two sliders map onto the CSS directly. **Blur** is the same idea as `blur()` inside a backdrop filter, and **Grayscale** pulls color out of the frosted area, which is the inverse of the `saturate()` adjustment in the code version. Starting at a blur of 10 with grayscale at 0 gives you a neutral frosted panel that keeps the colors behind it.

![Blur and Grayscale controls used to tune a glassmorphism effect in Elementor](https://theplusaddons.com/wp-content/uploads/2024/07/Adjust-Blur-Grayscale-for-Glassmorphism.png)Tuning blur and grayscale against a live background, rather than guessing values in a stylesheet.

The mental model is the same as the CSS version, which is worth understanding even when you use the toggle. The background image in step 2 is the thing being blurred. If nothing is behind the widget, there is nothing to frost.

Building an effect with a control panel instead of a stylesheet is the same tradeoff as with any other visual treatment. Our guides on [CSS hover effects in Elementor](https://theplusaddons.com/blog/css-hover-effects-in-elementor/) and [building an animated toggle switch](https://theplusaddons.com/blog/animated-toggle-switch-css/) walk through both routes for those components too.

## Glass Sticky Headers

The single most useful place for this effect is a sticky header. As the visitor scrolls, page content passes underneath the bar and blurs in real time, which keeps navigation legible without hiding the page behind an opaque strip.

![Elementor Navigation Menu widget with Sticky Menu enabled, showing a blurred glassmorphism header bar over page content](https://theplusaddons.com/wp-content/uploads/2025/04/Sticky-Glassmorphism-1-1024x916.png)A sticky menu with a frosted bar. The blur is recomputed continuously as content scrolls beneath it, which is what makes this the most expensive placement.

Two cautions specific to headers. First, this is the most expensive possible place to put a backdrop filter, because the blurred region has to be recomputed continuously while scrolling. Second, the contrast problem covered in the next section is at its worst here: your header text sits over whatever content happens to be scrolling past, which changes from moment to moment.

For the scroll behavior itself, see our guide on [how to create a sticky header in Elementor](https://theplusaddons.com/blog/sticky-header-in-elementor/).

## Where the Effect Earns Its Place

Glass works when it has a reason to be translucent: something worth seeing sits behind it, and the panel carries a small amount of text. It stops working when it becomes the default treatment for every surface on a page.

![Elementor info boxes styled with a glassmorphism frosted glass effect](https://theplusaddons.com/wp-content/uploads/2024/07/Info-Boxes-With-GlassMorphism-Effect.png)Info boxes are a good fit: short labels, generous padding, and a background worth revealing.

Short numeric content is another strong case. Counters and statistics carry very little text, usually at a large size, which sidesteps most of the readability problem while still benefiting from the depth.

![Number counter statistics block using a glassmorphism translucent panel](https://theplusaddons.com/wp-content/uploads/2024/07/Number-Counter-Statistic-with-Glassmorhpism.png)Large numerals on glass. Big type clears the contrast bar more easily than body copy does.

Where it tends to fail: long articles, data tables, forms, and any surface where someone has to read carefully for more than a few seconds. If you are designing a component system rather than a one off section, our guide to [building a reusable design system in Elementor V4](https://theplusaddons.com/blog/elementor-v4-design-system/) is the better place to decide which surfaces get glass and which stay opaque.

## Accessibility: What Most Glassmorphism Tutorials Skip

Glassmorphism has a genuine accessibility problem, and it is structural rather than a matter of picking better colors.

WCAG 2.2 success criterion 1.4.3 (Level AA) requires that text has *"a contrast ratio of at least 4.5:1"*, with large text allowed *"a contrast ratio of at least 3:1"*. Large text there means at least 18 point, or 14 point bold, roughly 24px and 18.5px.

Here is the structural issue. A contrast ratio is measured between two colors. On a glass panel, the effective background color is whatever happens to be behind it, blurred. Put a white heading on a glass card floating over a photo and the contrast ratio is not one number, it varies across the panel and changes if the background image is ever swapped. You cannot claim a passing ratio for a background that is indeterminate.

Practical ways to handle it:

- **Raise the tint opacity behind text.** The higher the opacity of your own fill, the less the unpredictable backdrop contributes. This is the single most effective fix, and it costs you some of the effect.- **Test against the worst case.** Find the lightest and darkest regions of your backdrop and measure against both, not against a convenient average.- **Keep body copy off glass.** Reserve the effect for headings, navigation and short labels where you control the text precisely.- **Do not rely on `text-shadow` as a fix.** It can help perceptually but it does not make an indeterminate contrast ratio measurable.

### Respecting Reduced Transparency

Operating systems let people turn transparency effects off, and CSS can detect it. The `prefers-reduced-transparency` media feature, per MDN, *"is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device."* The setting lives under Transparency effects on Windows, Reduce transparency on macOS, and Reduce Transparency on iOS.

`@media (prefers-reduced-transparency: reduce) {
.glass-card {
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}`

Be honest with yourself about the support level before you depend on it. MDN currently marks this feature as experimental with limited availability, meaning it is not Baseline and does not work in some widely used browsers. Treat it as a genuine improvement for the people whose browsers do honor it, not as your accessibility strategy. The opacity of your own tint is what carries that load.

## The Performance Cost

A backdrop filter is not free. The browser has to sample the pixels behind the element, blur them, and redo that work whenever anything in that region changes. On a static card this is a one time cost. On a sticky header over a scrolling page, it repeats constantly.

Sensible limits:

- Keep the number of simultaneous glass surfaces small. Twelve frosted cards in a grid is twelve blur regions.- Be cautious about combining it with a large animated element, where the blurred area is recomputed every frame.- Test on a mid range phone rather than a desktop. This is the kind of effect that feels fine on the machine it was built on and stutters everywhere else.

Since glass usually sits over a large background image, the image itself is often the bigger performance story. Our breakdown of [why an Elementor hero image hurts PageSpeed](https://theplusaddons.com/blog/elementor-hero-image-lcp/) covers the background image versus image widget decision that tends to matter more than the blur.

## Browser Support in 2026

Support is no longer the obstacle it was when the style first appeared. Per caniuse, `backdrop-filter` is supported by 95.69% of global browser traffic.

| Browser | Supported from |
| ------- | -------------- |
| Chrome | 76 |
| Edge | 17 |
| Safari (desktop and iOS) | 9 |
| Firefox | 103 |
| Opera | 64 |
| Samsung Internet | 12.0 |
Browser support for backdrop-filter, per caniuse data checked in August 2026.

Internet Explorer never supported it and Opera Mini does not. Firefox was the long holdout, arriving properly in version 103. That history is exactly why the `@supports` fallback above is worth keeping rather than assuming universal support.

## A Note on Glassmorphism Generators

Interest in glassmorphism generators has climbed sharply over the past year, and there are several good ones that let you drag a blur slider and copy the output. They are genuinely useful for settling on values quickly.

What they cannot do is tell you why the code they gave you produces nothing on your page. A generator has no view of your DOM, so it cannot warn you that a wrapper three levels up has `opacity: 0.99` and has quietly become a backdrop root. Use one to pick your numbers, then come back to the three failure modes above when the result does not appear.

## Frequently Asked Questions

### What Is the Difference Between Glassmorphism and Neumorphism?

Glassmorphism makes an element translucent so the layer behind it shows through blurred, creating a sense of depth between layers. Neumorphism keeps surfaces opaque and uses paired light and dark shadows to make controls look extruded from or pressed into the background. Glass implies stacked planes, neumorphism implies a single moulded surface.

### Why Is My backdrop-filter Not Working?

In order of likelihood: you used `filter` rather than `backdrop-filter`, your element has a fully opaque background covering the blurred pixels, or an ancestor element has become a backdrop root through a property such as `opacity` below 1, `filter`, `clip-path`, `mix-blend-mode` or `will-change`. A fourth possibility is that there is simply nothing visually interesting behind the element to blur.

### Is Glassmorphism Bad for Accessibility?

It is risky rather than automatically disqualifying. The difficulty is that WCAG 1.4.3 asks for a measurable contrast ratio of 4.5:1 for normal text, and a translucent panel does not have a fixed background color to measure against. You can use the style accessibly by raising the opacity of your own tint, keeping long body copy off glass surfaces, and testing against the lightest and darkest parts of the backdrop.

### Do I Need a Plugin for Glassmorphism in WordPress?

No. The effect is four CSS properties and you can add them through any method that lets you write custom CSS. A plugin extension is a convenience: it exposes blur and saturation as panel controls, applies to any section, column or widget, and means the styling is not held together by selectors that break when markup changes.

### Is Glassmorphism Still in Style?

Apple's move to Liquid Glass across its 26 series operating systems in 2025 made translucent layering a mainstream interface pattern again rather than a passing trend. The version that keeps working is the restrained one: glass on navigation, cards and overlays, with opaque surfaces for anything carrying substantial text.

## Suggested Reading

- [How to Add Custom CSS in Elementor for Free](https://theplusaddons.com/blog/add-custom-css-in-elementor/)- [How to Create a Sticky Header in Elementor](https://theplusaddons.com/blog/sticky-header-in-elementor/)- [3 Ways to Build an Animated Toggle Switch](https://theplusaddons.com/blog/animated-toggle-switch-css/)- [How to Build a Reusable Design System in Elementor V4](https://theplusaddons.com/blog/elementor-v4-design-system/)- [How to Add GSAP Animations in Elementor](https://theplusaddons.com/blog/gsap-animation-elementor/)

 

[Explore The Plus Addons for Elementor](https://theplusaddons.com/)

## Frequently Asked Questions

**Q: Why is my backdrop-filter not showing any blur?**
A: The blur usually fails for one of three reasons: the element is using filter instead of backdrop-filter, the element has a fully opaque background, or an ancestor has created a backdrop root. The page also points out a fourth gotcha: there may be nothing visually interesting behind the element to blur. In practice, that means glassmorphism needs transparency and a real backdrop, not just the CSS property alone.

**Q: What is the difference between glassmorphism and neumorphism?**
A: Glassmorphism makes a surface translucent so the layer behind it shows through in a blurred way, which creates depth between stacked planes. Neumorphism keeps surfaces opaque and uses paired light and dark shadows to make controls look pressed into or extruded from the background. The key difference is that glass implies layered transparency, while neumorphism implies one molded surface.

**Q: Can I add glassmorphism in Elementor without writing CSS?**
A: The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides a built-in Glass Morphism extension for Elementor. The page says it applies to any section, column or widget, and the setup uses Blur and Grayscale controls inside Advanced > Glass Morphism. That makes it useful when you want the frosted look without maintaining custom CSS across a site.

**Q: What is the best place to use glassmorphism on a website?**
A: Sticky headers are one of the strongest uses because content scrolls underneath them in real time, so the blur actually earns its keep. Short info boxes and counters also fit well since they carry little text and benefit from depth without becoming hard to read. The page warns that long articles, data tables and forms are poor candidates because readability drops fast when people have to study the surface for more than a few seconds.

**Q: How do I keep glassmorphism readable for accessibility?**
A: The safest move is to raise the opacity of your own tint behind the text so the unpredictable backdrop matters less. The page ties this to WCAG 2.2 success criterion 1.4.3, which asks for at least 4.5:1 contrast for normal text and 3:1 for large text. It also recommends testing against both light and dark parts of the backdrop and keeping body copy off glass surfaces.

**Q: Does glassmorphism hurt performance on sticky headers?**
A: Backdrop filters are expensive because the browser has to sample pixels behind the element, blur them, and repeat that work whenever the region changes. A sticky header is called out as the most expensive placement because it recomputes continuously while scrolling. The practical limit is simple: keep simultaneous glass surfaces small, avoid pairing them with large animations, and test on a mid range phone instead of only on desktop.