43 CSS Glassmorphism Examples + the 3-Line Recipe

Almost nobody was using backdrop-filter in 2018. Chromium engineer Mason Freed put unprefixed usage at about 0.0003% in November of that year (W3C CSS archive). Chrome Platform Status now lists about 31.4% of page loads (web-features data).

Most of it shows up on navigation bars, modals, cards and login forms sitting over a gradient or a photo.

What is CSS glassmorphism?

See the Pen
CSS – Frosted Glass by Kyle Wetton (@kylewetton)
on CodePen.

Put a semi-transparent, blurred panel over a colorful backdrop and whatever sits behind it shows through like frosted glass. That’s glassmorphism in CSS.

backdrop-filter softens everything behind the element. An rgba() or hsla() background lets color through, a 1px semi-transparent white border marks the edge of the pane, and box-shadow lifts it off the page.

WebKit proposed backdrop-filter for the CSS Filter Effects Module Level 2 to reproduce the blur used in iOS 7 and OS X Yosemite, according to the WebKit blog.

The look got its name later. Designer Michal Malewicz coined “glassmorphism” in 2020, the year Apple’s macOS Big Sur shipped glassy menu dropdowns and translucent sidebars (Webflow).

Web designers now treat it as a glassmorphism design trend they rebuild with plain CSS, no image assets needed.

CSS handles the frosted blur and the translucent tint with its light edge. A soft shadow adds depth. Reflection and refraction are another matter, since neither exists as a single property, and faking them takes extra gradient layers stacked on the base effect.

As of October 2026, backdrop-filter holds Baseline “newly available” status, dated to September 2024 when Safari 18 shipped it unprefixed (web-features data, MDN).

How to build a glassmorphism card in CSS

Everything goes on one element. A translucent background and backdrop-filter: blur() do most of the work, and a light border plus a box-shadow finish it.

Build it over a colorful backdrop, because blur on a plain page shows nothing:

Place the card over a gradient or photo.
Set a translucent fill with rgba(255, 255, 255, 0.15).
Add blur(10px) to backdrop-filter, with the -webkit- version written first.
Draw the edge with a 1px border at 30% white, plus a border-radius.
Add a soft box-shadow for lift.
Toggle each property in Chrome DevTools to see what it contributes.

The finished class looks like this:

.glass-card {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
padding: 24px;
}

backdrop-filter takes the same function list as filter, so blur() can sit beside saturate() or brightness() in one declaration (MDN).

Shadows matter more on glass than on solid cards, at least in my experience. A wide, soft shadow is what separates the panel from a backdrop the blur has already muted. There are more shadow effects you can build in CSS than the single value used here.

Rounded corners sell the pane. Try other values in a border radius generator before you commit.

Which blur and opacity values work best?

See the Pen
Glassmorphism by Sambat (@sambatlim)
on CodePen.

Start with a blur near 10px and a white fill between 0.1 and 0.25 alpha, then adjust against the real backdrop.

CSSmatic’s glass preset uses a 0.25 white fill, 10px blur and a 1px border at 0.4 alpha. The css3.com generator slider runs from 5px (subtle) to 25px (heavy frost).

Blur	Look	Fits
5px	Soft, backdrop shapes still readable	Light overlays
10px	Balanced frost	Cards, navigation bars
25px	Backdrop detail dissolves	Modals over busy photos

Higher blur hides busy detail behind text. A higher alpha does the same job from the other side by tinting the panel more heavily.

Put the alpha on the background with rgba(), not on the element with opacity. The first fades only the fill. The second fades the text and every child too, which CSSPortal’s generator guide advises against.

Use backdrop-filter rather than filter here. The first blurs only what sits behind the element, while filter: blur() blurs the element and its text (web.dev). That separate case is covered in the guide to the CSS blur effect.

Stacking helps too. web.dev’s own example combines brightness(150%) saturate(150%) blur(1rem), and a saturate() boost is the usual fix for color that blur washes out (the CSS-Tricks variant uses saturate(180%) blur(10px)).

Values depend on the backdrop, so test them against the actual background in a glassmorphism generator for CSS. Honestly, I’d rarely go past 20px.

What background makes the glass effect visible?

See the Pen
Blob Animation And Glassmorphism with CSS by TheDevEnv (@thedevenv)
on CodePen.

Colorful, varied backgrounds work. Multi-stop gradients let color shifts bleed through the tint, and photographs give the strongest frost, though contrast changes from one region to the next. An illustrated scene does the job as well.

Flat colors are the problem. There is nothing to soften, so the panel reads as a plain translucent box.

On a flat white page the effect is invisible no matter how correct the CSS is, as theplusaddons puts it in its 2026 guide.

Blur only changes areas with detail. A smooth gradient looks nearly the same blurred or unblurred, so shapes, image texture or text behind the card are what make the frost visible.

Webflow’s design guide makes the same point: something visually engaging has to sit behind the panel for the style to land.

Build the backdrop first with a gradient generator for CSS, then tune the glass over it.

Why is backdrop-filter not working?

When the blur does nothing, check the fill first. Most failures trace back to one of a handful of causes.

The background is opaque. The effect only shows through a translucent element, so use rgba() or hsla() on the fill (web.dev).
Nothing sits behind the panel, and a flat color gives the blur nothing to soften.
The -webkit- prefix is missing. Safari reads only -webkit-backdrop-filter before version 18 (September 2024).
An ancestor carries a filter or an opacity below 1, which cuts the blur off from the page behind it.
A child with its own backdrop-filter sits inside a blurred parent, and that nesting renders inconsistently.

The last two causes share a root in the spec. The W3C’s Filter Effects Module Level 2 draft stops a backdrop-filter from seeing past ancestors that have filters, opacity or other grouping properties, a boundary it calls the Backdrop Root.

The same draft says it does not yet have Working Group consensus on the definition of Backdrop Root. Engines disagree in practice: a WebKit bug filed in September 2024 reports that Safari on macOS renders only the parent’s blur when a child carries its own, while the reporter says Firefox applies both.

Chromium landed a fix for parents with opacity below 1 in February 2019, months before Chrome 76 shipped the property in July 2019.

Read together, the three sources give one working rule. Put backdrop-filter on an element whose ancestors carry no filter and no opacity below 1, and keep one blurred layer per stack. A parent that fades in with an opacity animation falls under the same rule while its opacity sits below 1.

To find the culprit, toggle backdrop-filter in the Styles pane of Chrome DevTools. Then step up through the ancestors and disable filter or opacity declarations one at a time.

Adding the blur also has a side effect. Any backdrop-filter value other than none creates a new stacking context (web.dev), so z-index order against neighboring elements can shift once the blur is added.

Which browsers support backdrop-filter, and what is the fallback?

All four major browsers run backdrop-filter. Chrome has it from 76, Edge from 79, Firefox from 103, and Safari unprefixed from 18.

Browser	First version	Prefix needed
Chrome	76	No
Edge	79	No
Firefox	103	No
Safari	18	Yes, -webkit- before 18

Sources disagree on Edge. web-features and web.dev start it at 79, while TestMu’s compatibility guide lists 17, the legacy EdgeHTML engine.

Current Edge runs on Chromium, so 79 is the working floor.

Older tutorials, freeCodeCamp’s among them, still say Firefox ships the property disabled. That ended with Firefox 103. Before it, users had to set layout.css.backdrop-filter.enabled and gfx.webrender.all in about:config (Can I Use).

Support lists age quickly, so cross-browser compatibility testing belongs in every release, not only the first build.

Writing the @supports fallback

Write the solid fallback first, then layer the glass inside @supports.

.glass-card {
background: rgba(30, 41, 59, 0.92);
color: #fff;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.glass-card {
background: rgba(255, 255, 255, 0.15);

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}

The condition tests both the prefixed and the standard property, so older Safari builds still get the blur (CSS-Tricks).

web.dev recommends a solid color or an image over a polyfill, citing performance.

Microsoft’s acrylic material follows the same logic. Fluent Design swaps it for a solid FallbackColor when Transparency effects are off or Battery Saver is on, and the docs tell designers to check that the fallback reads well as a plain color (Microsoft Learn).

How do you keep glassmorphism accessible?

Hold body text to 4.5:1 and large text and interface edges to 3:1 against the worst region of the backdrop, then let user settings swap the glass for a solid fill.

Contrast on a moving backdrop

Body text needs 4.5:1 under WCAG 2.2 SC 1.4.3 (W3C).
Large text, meaning 18pt or 14pt bold, needs 3:1 under the same criterion.
Interface components need 3:1 against adjacent colors under SC 1.4.11 (WebAIM).
A 12% white fill can swing from 8:1 to under 2:1 over a scrolling user photo (Superdesign).

WCAG offers no method for measuring text over semi-transparent colors, WebAIM notes, although that text must still pass.

So the test falls to you. Sample the lightest and darkest regions behind the card, and judge the text against the worse one.

W3C’s own guidance treats 3:1 and 4.5:1 as thresholds, and text can pass on paper while reading worse in practice. For the ratio math, the guide to color contrast walks through the formula.

The cheapest fix is raising the fill alpha until the worst region passes. If that is not enough, move long copy onto a more opaque inner layer.

Reduced transparency and contrast preferences

prefers-reduced-transparency works in Chrome and Edge from version 119, which web-features dates to October and November 2023.

Firefox keeps it behind a flag, and WebKit’s bug 175497 lists Safari’s vendor position as unknown, with privacy concerns noted.

By Chrome Platform Status counts, backdrop-filter runs on about 31.4% of page loads and prefers-reduced-transparency on about 3.3%, roughly 9 to 1.

Both preferences, together with prefers-contrast, arrive as media queries, so the override is short.

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
.glass-card {
background: rgb(30, 41, 59);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}

Safari does not expose the OS setting to CSS, so a page cannot react to it there, even though macOS and iOS both offer Reduce Transparency (MDN).

Make the default glass pass contrast on its own. Treat the preference query as an upgrade for browsers that support it, not as the safeguard.

The Altonet Fluid Glassmorphism plugin for WordPress follows this pattern, falling back to an opaque surface under either preference and to a semi-opaque one when backdrop-filter is unsupported.

Forced colors

In forced-colors mode the browser strips background colors and shadows (cssence), so the tint and the shadow disappear.

That leaves the 1px border as the only visible edge (Superdesign), and Windows High Contrast Mode retains borders and outlines (Khan Academy Engineering).

Keep the border declared on every glass panel
Emulate forced-colors in Chrome DevTools to confirm the edge survives

Does glassmorphism hurt performance?

It can, when the blurred area is large or sits over moving content. The css3.com generator notes call the property GPU-intensive with high blur values or large elements.

Higher blur values cost more GPU time, and a full-width header costs more than a small card. Motion is the other big factor. Scrolling or animation behind the panel changes the backdrop, so the blur recomputes.

CSSmatic singles blur out as the priciest filter, fine for a few cards and risky for dozens of animated panels.

Used on one small pane, the cost is modest. web.dev describes the property as a performant way to get effects that were difficult or impossible on the web before.

On mobile, css3.com warns of frame-rate drops during scrolling when the property is overused.

A sticky navigation bar is the worst common case, because the whole page scrolls behind it.

Engine teams treat the cost seriously. Mozilla’s implementation bug records performance loss from nested effects as the main motivation for the Backdrop Root boundary, and one patch there fixes slow render-task ordering on pages that use backdrop-filter many times.

Neither MDN nor web.dev publishes a ceiling for blurred elements per page. Any specific count is a number to test on your slowest target device.

Record a scroll in the Chrome DevTools Performance panel and look for frames that miss the 16.7 ms budget at 60 Hz. If they appear, cut the radius first, then the area, then the count.

When should you skip glassmorphism?

Skip it for dense reading text and for content that scrolls under the glass. Low-end mobile targets are another reason to hold back.

Use it for a few overlays over backgrounds you control, and keep solid surfaces everywhere else.

Where glass fits

See the Pen
Pure CSS Music Player UI Design (Glassmorphism) by CodingDecoding (@CodingDecoding)
on CodePen.

A navigation bar works when the labels are short and the hero behind it is one you control.
Modal windows suit it, since they are transient surfaces sitting over the page.
A handful of cards over a gradient or photo is fine.
Login forms too, with a few short fields over a fixed image.

Apple’s WWDC25 guidance for Liquid Glass shows the same restraint: sparing use, mostly on navigation-layer buttons and key actions such as a buy button, as MobileSyrup summarized the session.

A login form built in CSS is the easiest place to try it, since it comes down to two short fields over a fixed image.

For modal windows, start from a CSS modal base and add the glass layer last.

Where it breaks down

Long paragraphs, tables and dense forms
Content that scrolls under the panel, where no single contrast ratio holds
Pages that stack many blurred panels over animated backdrops
Panel edges that cannot reach 3:1 against the backdrop

A page built mostly from glass has no stable surface left for reading.

CSS Glassmorphism Examples To Check Out

Colour Glassmorphism

See the Pen
Glassmorphism by Kunal Umap (@kunal-umap)
on CodePen.

Product Glassmorph

See the Pen
[WIP] Product Glassmorph by Alex (@alexkleinubing)
on CodePen.

Glassmorphism by Mina

See the Pen
Glassmorphism by Mina (@codeanddream)
on CodePen.

Feedback Modal Design

See the Pen
Feedback Modal Design by Rizky Firman Syah (@RizkyFirman)
on CodePen.

Glass Morphism Icon

See the Pen
Glass Morphism icon by Swarup Kumar Kuila (@uiswarup)
on CodePen.

Glassmorph JS Calculator

See the Pen
Glassmorph JS Calculator by Jack Ellis (@opeala)
on CodePen.

Glassmorphism Creative Cloud App Redesign by Aysenur Turk

See the Pen
Glassmorphism Creative Cloud App Redesign by Aysenur Turk (@TurkAysenur)
on CodePen.

Glassmorphism: Simple Card UI

See the Pen
Glassmorphism: Simple Card UI by Rahul (@_rahul)
on CodePen.

Microsoft Fluent Material

See the Pen
Microsoft Fluent Material by Simone Bernabè (@simoberny)
on CodePen.

Glassmorphism CSS Panels and Buttons

See the Pen
Glassmorphism by Vihanga nivarthana (@vihanga)
on CodePen.

Glassmorphic Card by Glen Honeybone

See the Pen
Glassmorphic Card by Glen Honeybone (@urgedesign)
on CodePen.

Glassmorphism Icon Buttons

See the Pen
Glassmorphism Icon Buttons by Taylon, Chan (@tin-fung-hk)
on CodePen.

Gredient Mirror Effect

See the Pen
Glassmorphism by Albert (@walickialbert)
on CodePen.

iPhone 12 vs Galaxy S21

See the Pen
iPhone 12 vs Galaxy S21 #glassmorphism by Kalimah Apps (@khr2003)
on CodePen.

Glassmorphism Planet

See the Pen
Glassmorphism Planet by Tapio (@Taluska)
on CodePen.

CSS BEER! By Mike Golus

See the Pen
CSS BEER! by Mike Golus (@mikegolus)
on CodePen.

Glassmorphism Loader

See the Pen
Glassmorphism loader by shawn (@melzshawn1998)
on CodePen.

Glassmorphism Credit Card

See the Pen
Glassmorphism Credit Card by ron (@ronkeee)
on CodePen.

Generative macOS Big Sur Waves

See the Pen
Generative macOS Big Sur Waves 🌊 [SVG] by George Francis (@georgedoescode)
on CodePen.

Jelly Card Glassmorphism

See the Pen
Jelly Card Glassmorphism – Bootstrap 5 by JellyPir.@t Coding (@psyloute)
on CodePen.

Simple Pagination Design

See the Pen
Simple Pagination Design Using Glassmorphism Effect by FullyworldWebTutorials (@Fullyworld_Web_Tutorials)
on CodePen.

Social Icon Glassmorph

See the Pen
Social Icon Glassmorph by Alex (@alexkleinubing)
on CodePen.

Glassmorphism Side Navbar With HTML & CSS

See the Pen
Glassmorphism Side Navbar With HTML & CSS by Nikhil27bYt (@NikhilBobade)
on CodePen.

Tab-Bar Glassmorphism Effect

See the Pen
Tab-bar (Glassmorphism Effect) by Saba Alikhani (@fydsa)
on CodePen.

CSS Glassmorphism FAQ

What is the difference between glassmorphism and neumorphism?

See the Pen
Glassmorphism vs Neumorphism Cards | CSS, Js & VanillaTilt by Quentin Feret (@quentin-feret)
on CodePen.

They get depth in different ways. Neumorphism builds it from a light and a dark shadow on an element that matches its background color, while glass builds it from blur over a varied backdrop. The neumorphism style needs a flat mid-tone surface, the one place glass shows nothing.

Both struggle at the edge: CodeShack notes a soft shadow can fall below 3:1 contrast.

Is Apple’s Liquid Glass the same as glassmorphism?

Not quite. Liquid Glass is Apple’s design language for iOS, iPadOS, macOS, watchOS and tvOS (heise), while glassmorphism is a style web designers rebuild with blur and a translucent fill.

Microsoft’s acrylic belongs to the same family, built from blur, exclusion blend, tint and noise layers (Microsoft Learn).

How do you build glassmorphism in Tailwind CSS?

Pair a translucent fill such as bg-white/30 with a backdrop-blur-* utility, the combination Tailwind’s docs use. Mind the version, though. backdrop-blur-sm is blur(4px) in v3 and blur(8px) in v4, so the same class blurs harder after an upgrade.

Does Figma support the glass effect?

It does. Figma’s Background blur effect blurs any layers behind the selected layer, and each layer takes one background blur (Figma Help).

Keep the fill partly transparent so the blur shows, then follow this walkthrough on blurring in Figma for the steps.

Does glassmorphism work in dark mode?

See the Pen
Apple pay Glassmorphism Dark and light mode by Cristiano Luis (@Cristiano123)
on CodePen.

It does, with a different recipe. Dark glass uses a faint white fill and border over a deep base color instead of a strong tint.

Aimeos’s Pagible Glass theme sets about 5% white fill, about 10% white border and blur(20px) over #060A12, so run the text contrast check again against that backdrop.

Can a generator write all the CSS for you?

Create stunning glass-like UI elements with ease. This intuitive CSS Glassmorphism Generator helps designers and developers craft modern, frosted-glass effects for their web projects.

Key Features:

Live Preview: See your changes instantly with multiple example components
Fine-tuned Controls: Adjust blur, transparency, outline, and saturation
Quick Presets: Choose from carefully crafted presets:
- Subtle: Light, elegant glass effect
- Bold: High-impact, prominent blur
- Frosted: Maximum blur with minimal transparency

Only part of it. A generator writes the core declarations, and CSSmatic and css3.com both include the -webkit- prefix.

Neither sees your real backdrop, so the contrast check and the @supports fallback stay your job.

Testing CSS Glassmorphism Before It Ships

Check contrast against the worst backdrop region first. After that, confirm the solid fallback under @supports, and finish by scrolling the page on the slowest device you target.

Contrast goes first because it fails on every browser, while the fallback matters only on older engines and the scroll test only on weaker hardware.

Passing the first check has a price: a higher fill alpha makes the pane read closer to a solid card.

The fallback check drops in priority after 2027-03-16, the date web-features expects backdrop-filter to reach Baseline Widely Available (verified October 2026).

Run the contrast pass against a full web accessibility checklist before the panel reaches users.

Author
Recent Posts

Bogdan Sandu

Bogdan Sandu specializes in web and graphic design, focusing on creating user-friendly websites, innovative UI kits, and unique fonts.

Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.