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.
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);
}
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:
filteropacityless than 1mask,mask-imageormask-borderclip-pathbackdrop-filtermix-blend-modewill-changeset 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 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 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.
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.
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 and building an animated toggle switch 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.
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.
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.
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.
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 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-shadowas 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 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 |
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
- How to Create a Sticky Header in Elementor
- 3 Ways to Build an Animated Toggle Switch
- How to Build a Reusable Design System in Elementor V4
- How to Add GSAP Animations in Elementor
