Glassmorphism turns interface panels into frosted glass. A background blur and a semi-transparent fill do the work that heavy shadows and textures used to do, and the layers separate without either one.
Michal Malewicz, a designer, gave the style its name in a UX Collective post on 22 November 2020, right as Apple’s macOS Big Sur brought it to the desktop.
Cards, modals and navigation bars are where it usually shows up. Whether it holds up gets judged against the WCAG 2.2 contrast minimum of 4.5:1 for body text.
The CSS property behind the blur is backdrop-filter. It has been Baseline Newly Available since 16 September 2024, when Safari 18 became the last major engine to ship it unprefixed (web-platform-dx, 2026).
What Is Glassmorphism?
A glassmorphic panel combines a semi-transparent fill, a blur of whatever sits behind it, a thin light border and a soft shadow, all over a colorful background.
The blur keeps shapes behind the panel visible but unreadable, which separates layers without heavy shadows or textures. Stack a few panels and they read front to back at a glance, so the blur alone builds a clear visual hierarchy.
The values below come from two published recipes (OpenReplay and Superdesign), and they land close together.
- A white fill at low alpha, 12 to 15 percent in both recipes (dark variants run higher)
- backdrop-filter at 10px to 12px
- A 1px border in white at 20 to 25 percent alpha, which draws the glass edge
- A soft, wide shadow, such as 0 8px 32px at 10 to 25 percent black
None of it works over a flat color. The panel needs a vivid gradient or image behind it, or there is nothing to blur.
The fill has to let light through too. MDN says the element or its background must be at least partly transparent for backdrop-filter to show, so an opaque fill gives no blur at all.
Some lookalikes get mistaken for the real thing. A transparent overlay with no blur lets sharp content behind the panel compete with the text on it, and a pre-blurred background image never reacts to content scrolling underneath. Glossy, textured surfaces are skeuomorphism, which relies on realistic texture instead of blur.
Where Did Glassmorphism Come From?
Designer Michal Malewicz of Hype4.Academy named glassmorphism in November 2020, but blurred translucent panels were already shipping in operating systems. He grouped patterns that existed under one name rather than inventing anything.
Apple’s iOS 7 announcement on 10 June 2013 highlighted translucency as a core part of the redesign, and Control Center was one of the new panels that used it (Apple press release, 2013).
Microsoft’s version lives in Fluent Design. Microsoft Learn describes the acrylic recipe as background, blur, exclusion blend, color tint and noise layered together.
Most design write-ups point to Apple’s macOS Big Sur release in November 2020 as the mainstream debut. Ten days later, on 22 November 2020, Malewicz published “Glassmorphism in user interfaces” on UX Collective, and the name spread through Dribbble and Behance with its own hashtag.
Some guides count Windows 11 as a glassmorphism example. Microsoft’s Mica documentation calls the material opaque and tinted by the user’s wallpaper, so the see-through blur belongs to acrylic and not to Mica.
So the name is from 2020, and the technique is a good deal older.
How to Create Glassmorphism With CSS
A semi-transparent background color, backdrop-filter with a blur value, a 1px light border and a soft box-shadow, applied to an element over a vivid backdrop, produce the effect. The blur comes from backdrop-filter alone, and the other declarations shape how the blurred pane reads.
- Place the element over a gradient or image, since blur over a flat color shows nothing.
- Set a semi-transparent background color on the element.
- Add backdrop-filter with a blur() value, plus the -webkit- prefixed copy for older Safari.
- Add a 1px border in a lighter, semi-transparent shade and round the corners.
- Add a soft, wide box-shadow so the pane lifts off the backdrop.
- Wrap the blur in an @supports rule and give unsupported browsers a more opaque fill.
A separate walkthrough of glassmorphism in CSS goes deeper on the code.
Core properties and values
See the Pen
Glassmorphism Credit/Debit Card (pure CSS) by Shounak (@dasshounak)
on CodePen.
Blur values sit at 10px to 12px across OpenReplay, Superdesign, MDN and the web.dev modal example. Fill alpha is where the sources scatter, anywhere from 0.12 up to 0.5.
Lower alpha lets more of the backdrop through, while higher alpha protects the text. I’d start near 0.15 and raise it until the text passes a contrast check.
.glass {
background: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}A CSS glassmorphism generator helps tune blur and alpha by eye before the values go into code.
A saturate() filter beside blur() boosts the color that passes through, and examples use 150 to 160 percent.
Any backdrop-filter value other than none creates a new stacking context, so z-index on child elements can behave differently (web.dev, 2019).
If no blur shows up, check the fill alpha first. An opaque fill hides the effect completely.
Fallback for browsers without support
An unsupported browser renders the pane as a flat translucent rectangle, so the fallback has to carry the text on its own.
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass {
background: rgba(255, 255, 255, 0.85);
}
}Superdesign uses a fill near 0.82 to 0.85 alpha for this case. Google’s web.dev guidance goes a step further and recommends a pre-blurred image over a polyfill, for performance reasons.
Does Backdrop-Filter Work in Every Browser?
Yes, in current releases of Chrome, Edge, Firefox and Safari, and Safari needed the -webkit- prefix until version 18. Baseline lists the property as Newly Available since 16 September 2024, with Widely Available status expected on 16 March 2027 (web-platform-dx, as of October 2026).
| Browser | First version | Prefix needed |
|---|---|---|
| Chrome | 76 (30 July 2019) | No |
| Edge | 79 | No |
| Firefox | 103 (26 July 2022) | No |
| Safari | 18 (16 September 2024) | Yes, -webkit- before 18 |
Chrome shipped it in version 76 after more than 560 upvotes on the Chromium bug, according to Google’s web.dev guide (2019).
Firefox 103 followed on 26 July 2022 (MDN release notes). That put the property in all three engines, with Safari still requiring the prefix (web.dev, 2022).
Apple’s Safari 18 release notes list unprefixed support and a fix for blur not rendering on elements added after the page loads. That covers elements inserted by script, a common pattern for modals (Apple, 2024).
My rule is to keep both declarations until Safari 17 and older drop out of your analytics.
A visitor on an unsupported browser sees a flat translucent fill, and text can fail over a busy backdrop. Checking that state belongs in routine cross-browser compatibility testing, with the @supports fallback in place.
Why Glassmorphism Causes Accessibility Problems
Text on a glass panel has no fixed background color, so its contrast shifts with whatever sits behind the blur. WCAG 2.2 requires 4.5:1 for body text and 3:1 for large text and UI components, and a panel can pass at one scroll position and fail at the next.
Success criterion 1.4.3 covers text. Body text needs 4.5:1, large text (18pt, or 14pt bold, roughly 24px or 19px) needs 3:1, and computed ratios are not rounded, so 4.499:1 fails (W3C Understanding WCAG 2.2, US Access Board ICT Baseline). Controls fall under SC 1.4.11, which asks UI components for 3:1 against adjacent colors (W3C).
Both thresholds measure color contrast, and a 1px border at 0.25 alpha is a weak cue for a button. Give controls a clearer edge or a visible label.
W3C also documents text over background images without enough contrast as a named failure (technique F83). A glass panel over a photo is the same situation.
Sources split on whether glass can be certified at all.
IxDF says glassmorphism can be accessible when text contrast is high and designs are tested with accessibility tools. Superdesign takes the opposite side and argues that once users scroll arbitrary content under the glass, contrast cannot be guaranteed.
Most of the disagreement comes down to the backdrop. A fixed gradient can be measured once, but scrolling content can’t.
- Raise the fill opacity behind text. Apple’s Human Interface Guidelines note that thicker, more opaque materials give text better contrast.
- Keep body text off panels that float over photos or video.
- Test against the lightest and darkest regions of the backdrop, not the average.
- Honor the reduced-transparency setting with the prefers-reduced-transparency media query. Chrome and Edge support it from version 118 (October 2023), while Firefox and Safari do not ship it by default (MDN browser-compat-data, as of October 2026).
An accessible color palette generator speeds up the search for text and fill pairs that clear 4.5:1.
Apple added the same kind of control to its own glass in iOS 26.1 (3 November 2025). A Liquid Glass setting now switches from the default clear look to a tinted one that increases opacity, according to Apple’s release notes.
What Does Glassmorphism Cost in Performance?
Backdrop blur is GPU work, and the cost grows with the blurred area and the number of panels. Weak mobile GPUs feel it first.
Mozilla’s Bugzilla records a 2023 case in Firefox for Android. Twitter.com stuttered with input lag on Adreno 330 phones, and the reporter found that disabling backdrop-filter removed the problem.
A Mozilla engineer wrote that the property is resource intensive and its penalty unavoidable, with older Adreno 330 hardware hit hardest. A related Bugzilla report on apple.com explains part of why: picture caching works poorly on a page with a backdrop filter, so the entire page is re-rendered on each scroll.
That makes a glass header, the usual sticky navigation pattern, an expensive place to use the effect.
- Blur a card, not a full-width pane
- Cap how many glass panels share one screen
- Keep the blur radius static during animation
- Offer a solid fill where the effect janks, and test on the slowest phone you support
When Should You Use Glassmorphism, and When Should You Skip It?
Use it as an accent on a few floating surfaces over a controlled backdrop. Skip it for dense text, content areas and hardware you cannot test.
The upsides are modest but real.
- Layering shows hierarchy without heavy shadows
- Context stays visible behind modals and menus
- Plain CSS covers it in current browsers
The downsides run a bit longer.
- Text contrast depends on the backdrop
- Blur costs GPU time on large or scrolling areas
- Unsupported browsers need a fallback
- Over a flat or busy background the effect disappears or turns to noise
Components where glass works
Glass fits short-lived or floating surfaces that sit over a backdrop you control.
- Modals and overlays
- Notification panels
- Navigation bars
- Dashboard widgets
- Login cards
A modal is the clearest fit. Blurring the page behind it marks what is secondary, and modals built in CSS need only one extra declaration.
Login forms styled in CSS suit the effect for the same reason. One short card, a controlled backdrop and very little text.
Conditions where it fails
Nielsen Norman Group’s Raluca Budiu argued in October 2025 that iOS 26’s glass-heavy visual language obscures content instead of letting it take the spotlight.
Dense or long text is a poor fit, because body copy needs a stable background and a blurred one keeps shifting.
Uncontrolled backdrops such as user photos, video and scrolling content push contrast below the WCAG thresholds.
Apple’s guidelines keep its glass material out of the content layer and ask for sparing use on custom controls (Apple, 2025).
And if unsupported browsers and reduced-transparency users cannot get a solid surface, skip glass.
My rule of thumb is to use glass when the backdrop is controlled, the text is short and a solid fallback exists. If any of those fails, use a solid surface.
How Does Glassmorphism Differ From Neumorphism, Skeuomorphism and Liquid Glass?
Blur and transparency give glassmorphism its depth. Neumorphism gets there with a pair of soft shadows on an opaque surface, and skeuomorphism leans on realistic texture. Apple’s Liquid Glass is a material that refracts light.
| Style | Depth cue | Surface treatment |
|---|---|---|
| Glassmorphism | Background blur, layered panels | Translucent, frosted, static |
| Neumorphism | Two soft shadows, one light and one dark | Opaque, same color as the background |
| Skeuomorphism | Realistic texture, gloss and shadow | Mimics a physical object |
| Apple Liquid Glass | Refraction and highlights that react to motion | Translucent, dynamic, system-level |
IxDF traces the name of the soft-shadow style to “new skeuomorphism” and calls it soft UI for its characteristic low contrast. A fuller breakdown of neumorphism covers how that style is built.
The two also tend to fail different WCAG criteria. Glass fails text contrast (1.4.3) when the backdrop changes, while neumorphism fails non-text contrast (1.4.11) because component edges sit too close to the background color (W3C, LogRocket).
TechTarget defines skeuomorphism as extra ornamentation that makes a design resemble another object. Glassmorphism keeps one physical cue, translucent glass, and drops the ornament.
Apple announced Liquid Glass on 9 June 2025 as a new material that combines the optical qualities of glass with fluidity (Apple Newsroom). Where glassmorphism blurs the background, Liquid Glass bends it, adding specular highlights and edge refraction that respond to motion, according to Setproduct.
Some guides use the two names interchangeably, while DesignMonks and Setproduct treat them as separate styles. The separation holds on implementation: a CSS blur recreates glassmorphism, but Liquid Glass is a GPU-rendered system material.
visionOS windows use a system glass material that lets light from the room and virtual content show through. The platform has no separate light or dark appearance, because the glass adapts to what sits behind it (Apple, WWDC23).
Glassmorphism FAQ
Is glassmorphism still in use in 2026?
Yes, mostly as an accent. Setproduct’s 2026 comparison says the style cooled after its early peak because text contrast depends on the backdrop, and that it still trends on accent surfaces rather than full layouts.
How do you make the glass effect in Figma?
Add a Background blur effect to the layer and lower the fill opacity. Figma blurs whatever sits behind the selected layer, and each layer can carry one background blur (Figma Learn, 2025).
Malewicz’s 2020 post adds that the blur fails in most design tools when only the layer opacity drops and the fill stays at 100 percent.
How do you build glassmorphism with Tailwind CSS?
Pair a translucent background utility with a backdrop-blur utility, such as bg-white/30 backdrop-blur-md, the combination shown in Tailwind’s documentation. The md size sets blur(12px).
Add a light border utility and a soft shadow to finish the edge.
Does glassmorphism work in dark mode?
Yes. Swap the white fill for a dark tinted one and keep a faint light border.
Superdesign’s dark variant uses a fill of rgba(17,25,40,0.55) with a border of rgba(255,255,255,0.12), a much higher alpha than its 0.12 light fill. Body text still has to reach 4.5:1.
Can a generator write the CSS for glassmorphism?
Yes, for starting values. The generator at glassmorphism.com comes from the designer who named the style and offers a Copy CSS control.
A generator previews the panel over its own sample backdrop, so check the output against your real one for contrast.
Testing Glassmorphism Before It Ships
Glassmorphism ships safely when each glass panel passes a contrast check at its worst backdrop and renders smoothly on the weakest supported phone. The order of the checks matters.
- Contrast at the lightest and darkest backdrop
- A solid fallback for unsupported and reduced-transparency users
- Frame rate on the slowest phone
Contrast comes first because a failure there affects every visitor, while a slow blur affects only older hardware. A web accessibility checklist keeps the first two checks from slipping.
The sequence has a cost. Raising fill opacity to pass the first check removes some of the see-through effect the style exists for.
The reduced-transparency half of the second check collapses into a single prefers-reduced-transparency media query once Firefox and Safari ship it. As of 26 October 2026, only Chromium-based browsers such as Chrome and Edge do.
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.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
