Guides · · Maxwell Prehoda
12 Glassmorphism Examples, From Liquid Glass to Fluent Acrylic, That Stay Readable
Glassmorphism is a translucent surface, usually `backdrop-filter: blur()` over a semi-transparent fill, that lets colour from behind show through while keeping content on top readable. It came back in a big way when Apple introduced Liquid Glass across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26 in June 2025, and the best examples now share three habits: the glass sits on a layer above content (navigation, menus, sheets), the backdrop behind it has enough colour to make the blur worth it, and there is a solid fallback for people who turn transparency off.
Below are 12 examples to learn from: the operating systems that defined the look, the tools and write-ups that made it work on the web, and our own frosted components, each running live as copyable HTML and CSS.
1. Apple Liquid Glass: Best for floating navigation over scrolling content
Platform: iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26, tvOS 26
Apple announced Liquid Glass on 9 June 2025 as a translucent material that reflects and refracts its surroundings, drawing on the depth of visionOS. It is the first design to span all of Apple's platforms at once. Its colour takes cues from nearby content and adapts between light and dark, specular highlights respond to movement, and controls morph to reveal more options as you move through an app.
The detail most worth copying is behavioural, not visual: in iOS 26, tab bars shrink as you scroll down and expand when you scroll back up. Apple's Human Interface Guidelines make the rule explicit: Liquid Glass forms a functional layer for controls and navigation, such as tab bars and sidebars, that floats above content, and you should not use it in the content layer itself.
Our Liquid Glass Tab Bar below is a pure-CSS take on the same idea: a floating tab bar over a scrolling feed where the selected tab wears a glass droplet that magnifies the icon under it and springs to the tab you pick.
Watch out for: Refraction is the hard part on the web. A plain blur reads as frosted glass, not liquid glass; true bending needs SVG displacement filters, which only work as a backdrop-filter in Chromium.
2. Liquid Glass in the Browser by kube.io: Best for developers who want real refraction, not just blur
Platform: CSS + SVG filters, Chromium for the full effect
This September 2025 article is the most rigorous attempt to rebuild Liquid Glass on the web. It models the glass surface profile, uses Snell's law to work out how light bends through it, and bakes the result into a displacement map: the red channel holds the horizontal offset and the green channel the vertical one. An SVG `feDisplacementMap` applies it, `feBlend` adds a specular highlight, and the whole filter runs as a CSS `backdrop-filter`.
It is honest about limits: Chrome is the only browser where SVG filters work as a backdrop-filter, so the final demo runs only there, and the author suggests a layered blur as the fallback elsewhere. Chromium-based shells such as Electron are fair game.
Our Liquid Glass Magnifier Lens below uses the same approach: a drop of glass drifts over small print, magnifying the middle and squeezing the rim, and other browsers show a clear glass bead instead.
Watch out for: Displacement filters sample the backdrop every frame. Keep refracting glass to small elements such as buttons and lenses, never full-width panels.
3. liquid-glass-react by rdev: Best for React apps that want the liquid look as one component
Platform: React, MIT license
A popular open source React component (about 6.6k GitHub stars) that wraps any child content in a Liquid Glass effect: edge bending and refraction, adjustable frost, chromatic aberration, elasticity, and hover and click responses. The props make the knobs explicit: `displacementScale` defaults to 70, `blurAmount` to 0.0625, `elasticity` to 0.15 and `aberrationIntensity` to 2.
It is a good way to find the right amount of effect quickly. Turn elasticity and aberration down until the glass feels like a material rather than a toy, then decide whether you need the component at all or just its settings.
If you would rather not ship a dependency, our Liquid Glass Button below does the pill in HTML and CSS: the dots behind it swell in the middle and squeeze at the rim through an SVG displacement map, with a frosted fallback.
Watch out for: The README notes that Safari and Firefox only partially support the effect and the displacement is not visible there, so design the frosted fallback as a first-class state.
4. Microsoft Fluent Acrylic: Best for menus, flyouts and other transient surfaces
Platform: Windows apps (WinUI), Fluent Design
Frosted glass
Readable over anything
A heavy blur, a little grain and a soft inner glow.
Acrylic is the most fully documented glass material anywhere, and its recipe is a better starting point than most CSS tutorials: background, blur, an exclusion blend layer for contrast, a colour tint, and noise. The noise matters. A faint grain stops large blurred areas from looking like a smeared JPEG and makes the surface read as a physical material.
Microsoft's usage rules are equally useful. Use background acrylic for transient UI such as context menus, flyouts and light-dismiss panes. Do not put it on large background surfaces, do not place two acrylic panes edge to edge (you get a visible seam), and do not put accent-coloured text or hyperlinks on it, because they are likely to fail contrast at 14px.
Our Frosted Glass Panel below borrows the grain: heavy frosted glass over a turning aurora, with an inline SVG turbulence filter blended in with overlay so the text stays crisp.
Watch out for: Windows renders acrylic as a solid colour in Battery Saver, with transparency effects turned off, on low-end hardware and in High Contrast mode. Your web glass needs the same solid fallback.
5. Microsoft Mica: Best for long-lived app backgrounds that should feel personal
Platform: Windows 11 apps (WinUI and Win32)
Mica is the counterpoint to acrylic, and the reason it belongs in a glassmorphism list is what it leaves out. It is opaque. It tints the window background with the user's theme and desktop wallpaper, but it only samples the wallpaper once, which Microsoft says is specifically for app performance. It also falls back to a neutral colour when the window is inactive, so the focused window is easy to spot.
The lesson for the web: the base layer of an app rarely needs live blur. A subtle tint taken from a brand colour or an image gives most of the warmth at none of the cost, and real glass can then be saved for the floating layer above it, as Microsoft's two-layer system does.
Watch out for: Mica only appears where every layer above it is transparent. On the web, the equivalent trap is a parent with a background or opacity that hides or breaks the effect you set on a child.
6. Windows Aero and macOS Big Sur: Best for understanding why glass keeps coming back
Platform: Desktop operating systems, 2007 and 2020
Glass is not new. Windows Vista and Windows 7 used the Aero design language, with glass-like window borders and status bars, years before anyone called it glassmorphism. Flat design pushed it out after iOS 7 in 2013, and macOS Big Sur in 2020 is often cited as an early example of an operating system bringing glassmorphic elements back.
The pattern repeats because glass solves a real problem: it separates a floating layer from the content beneath it while keeping that content visible. Each wave also repeats the same failure, text that is readable over one part of the background and not another.
Our macOS Glass Dock below is a CSS take on the most familiar glass surface on a Mac: a frosted dock over a drifting wallpaper where icons magnify under the cursor and neighbours grow a little with `:has()`.
Watch out for: Every era of glass has needed an off switch. Windows today drops acrylic to a solid colour in Battery Saver and on low-end hardware, and blur is still one of the most expensive common effects on the web.
7. Hype4 Glassmorphism CSS Generator: Best for getting a first frosted card in a minute
Platform: Free web tool by Hype4 Academy
Frosted glass
A translucent pane over slowly moving color.
The term glassmorphism was coined by Michał Malewicz in 2020, and Hype4 Academy, which credits him on its site, hosts what it calls the original generator for the style. You set blur, refraction and depth, and it writes a `.glass-card` rule with a semi-transparent rgba background, a light border and a soft shadow that you copy with one click.
Use it to learn the ingredients rather than to ship the output: translucent fill, backdrop blur, a hairline border that catches the light, and a shadow that lifts the pane off the background. Change one at a time and you see what each contributes.
Our Glassmorphism Card below is the classic version with motion: a frosted pane over two gradient orbs that slowly circle behind it, so you can watch the blur at work.
Watch out for: A generator shows glass over its own colourful backdrop. Over your real page, a white or grey background makes the same CSS look like a dirty card. Glass needs colour behind it.
8. Josh Comeau's next-level frosted glass: Best for sticky headers that blur content scrolling under them
Platform: CSS tutorial, free
Josh Comeau's December 2024 article explains why most frosted headers look slightly wrong: the `backdrop-filter` algorithm only considers the pixels directly behind the element, so colourful content just outside the edge never bleeds into the blur and the glass looks unnaturally sharp at its border.
His fix is to move the blur onto an absolutely positioned child that is 200 percent of the header's height, so it picks up content below, then trim the excess with `overflow: hidden` or a `mask-image` gradient, plus `pointer-events: none` so the invisible part does not block clicks. He notes `overflow: hidden` only worked for this in Chromium from Chrome 142, which is why the mask is the safer choice.
Our Glass Header on Scroll below shows the behaviour that pairs with it: the header starts clear and frosts over once the page scrolls under it.
Watch out for: Wrap the effect in an @supports query so browsers without backdrop-filter get an opaque, readable header instead of transparent text over the hero.
9. Tailwind backdrop-blur utilities: Best for Tailwind projects that need consistent blur levels
Platform: Tailwind CSS, free
Tailwind's backdrop-blur scale is a ready-made set of glass strengths: `backdrop-blur-xs` is 4px, `sm` 8px, `md` 12px, `lg` 16px, `xl` 24px, `2xl` 40px and `3xl` 64px, each backed by a `--blur-*` theme variable you can extend. Arbitrary values (`backdrop-blur-[2px]`) and CSS variables are supported for one-offs.
A shared scale is underrated. Glass looks inconsistent when every component picks its own radius, and a token per level (subtle for chips, medium for menus, heavy for sheets) keeps the layers readable as depth.
Our Glass Search Bar below is a frosted pill field that widens on focus and drops a glass list of suggestions with a stagger, all with a real input and `:focus-within`.
Watch out for: Higher blur values cost more to render, and the cost scales with the area blurred. Reserve 2xl and 3xl for small surfaces or static screens.
10. NN/g glassmorphism guidelines: Best for checking a glass design for legibility before launch
Platform: Nielsen Norman Group article, 2024
$48,290
Megan Brown's June 2024 article for Nielsen Norman Group is the clearest checklist for shipping glass. Check contrast across the whole component, because a translucent surface can be readable in one spot and unreadable in another. More background blur is better, especially over intricate backgrounds. Prefer simple backgrounds where you control them, and use the style sparingly to suggest depth rather than to decorate everything.
It also recommends giving users control: where you can, offer a way to reduce transparency that swaps glass for solid colours. That mirrors what Windows does with its transparency setting.
Our Dark Glassmorphism Card below shows one way to keep contrast stable: smoked black glass over neon glows, where a dark tint plus the blur keeps the text against a predictable surface.
Watch out for: Test contrast at the worst point of the backdrop, not the average. A pane that passes over a dark corner can fail over a bright orb a few pixels away.
12. Our Glass Credit Card: Best for fintech heroes and payment pages
Platform: Motions directory, free, pure CSS Ours
•••• •••• •••• 2046
A frosted payment card with a gold chip that floats with a slow 3D tilt while a holographic sheen slides across. It uses the standard card ratio and a masked number, and it is built from gradients and one pseudo-element, so it stays light enough for a hero.
Glass works well here because the card is the subject, not a container for long text, and the motion shows off the material. For hover tilts on other cards see our 3D hover effect examples.
Watch out for: Keep the tilt slow and stop it under prefers-reduced-motion. A constantly moving card next to a payment form pulls attention away from the fields.
How to choose a glassmorphism style
Match it to the layer
Glass belongs on surfaces that float over content: navigation, menus, toasts, sheets and dialogs. That is Apple's Liquid Glass rule and Microsoft's acrylic rule. For the base layer of an app, use an opaque tint in the spirit of Mica. For content such as long text, tables and forms, use solid surfaces. Our Glass Navbar and Glass Modal Dialog are good floating-layer starting points.
Match it to the backdrop
Frosted glass over a flat white page looks like a grey card. Make sure there is colour or imagery behind it, add a fine grain like acrylic's noise for large panes (Frosted Glass Panel), and extend the blur past the edge with Josh Comeau's technique for sticky headers. Choose refracting liquid glass only for small elements in Chromium, with frost as the fallback.
Match it to the reader
Check contrast at the worst point behind the text, prefer more blur over busy backgrounds, and provide a solid fallback through @supports and through prefers-reduced-transparency where it is supported. Animate the glass element's position or opacity, never the blur radius, which repaints every frame.
Put one piece of glass on your page this week
Pick the one surface that floats over something colourful, usually the header or a dialog, and make only that glass: a semi-transparent fill, a 12 to 16px backdrop blur, a hairline light border and a soft shadow, wrapped in @supports with an opaque fallback. Check contrast over the brightest part of the background. If it reads well there, it reads well everywhere.
Copy any frosted component from our Glass Effects directory, or describe the surface you need and get production-ready CSS from the creator. Glass pairs naturally with animated backgrounds, since the blur needs something moving behind it.
Make a frosted glass sticky header in pure CSS for a site with a gradient hero. Use a 30% white fill, backdrop-filter blur(16px) saturate(1.4), a 1px top highlight border and a soft shadow. Extend the blur below the header with a mask so content just outside the edge is included. Fade the frost in over 200 ms once the page scrolls, using a scroll timeline where supported. Provide an opaque fallback in @supports not (backdrop-filter: blur(1px)) and keep text at 4.5:1 contrast.
Common questions
How do you make glassmorphism in CSS?
Give the element a semi-transparent background such as rgb(255 255 255 / 30%), add backdrop-filter: blur(12px) or more, a thin light border and a soft shadow, and place it over a colourful background. The element must be at least partly transparent or the blur behind it is hidden. MDN lists backdrop-filter as Baseline 2024.
Who invented glassmorphism?
The term was coined by Michał Malewicz in 2020. The look itself is older: Windows Vista and Windows 7 used glass-like Aero window borders, and macOS Big Sur (2020) brought translucent surfaces back to the desktop. Apple's Liquid Glass, announced in June 2025, is the latest big revival.
Is glassmorphism bad for accessibility?
It can be. The main risk is text that is readable over one part of the background and not another. Nielsen Norman Group recommends checking contrast across the whole component, using more blur over busy backgrounds, and offering a way to reduce transparency. Windows and Apple both replace glass with solid colours when users turn transparency effects off.
What is the difference between glassmorphism and Liquid Glass?
Classic glassmorphism is frosted: it blurs what is behind it. Apple's Liquid Glass also reflects and refracts its surroundings, with specular highlights that respond to movement, so edges bend the content behind them. On the web, refraction needs an SVG displacement filter used as a backdrop-filter, which currently works fully only in Chromium.
Does backdrop-filter hurt performance?
It costs more than most CSS, and the cost grows with the blurred area and the blur radius. Microsoft notes that acrylic is GPU-intensive and is switched off in Battery Saver. Keep glass to a few surfaces, avoid animating the blur radius, and test on a mid-range phone.
Sources
- Apple Newsroom: Apple introduces a delightful and elegant new software design
- Apple Human Interface Guidelines: Materials
- Microsoft Learn: Acrylic material
- Microsoft Learn: Mica material
- Nielsen Norman Group: Glassmorphism
- Josh W. Comeau: Next-level frosted glass with backdrop-filter
- kube.io: Liquid Glass in the Browser
- liquid-glass-react on GitHub
- MDN: backdrop-filter
- Tailwind CSS: backdrop-filter blur
- Wikipedia: Glassmorphism
- Hype4 Academy: Glassmorphism CSS Generator