Create a glassmorphism-style output and download it as a GLASSMORPHISM file—fast, simple, and processed right in your browser.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid #ffffff40; border-radius: 16px;
backdrop-filter: blur() — 10-20px is the sweet spot; under 4px barely registers, over 30px washes out everything behind. Opacity (0-100%) drives the rgba alpha on the panel — 0.15-0.30 for a clear glass look, 0.40-0.75 for a frosted look that still hints at the background. Saturation (100-200%) brightens the blurred backdrop so colours pop through the panel — Apple's Big Sur/iOS recipe pairs blur with saturate(180%).1px solid rgba(255, 255, 255, 0.18) — that thin highlight is what sells the "glass edge." Border radius runs 8-24px; 12-16px reads as modern card UI, 24px+ trends pill-like..glass output with backdrop-filter, the -webkit-backdrop-filter Safari prefix, rgba background, border, and border-radius. Click "Copy" and paste into your stylesheet — no sign-up, no watermark, MIT-friendly code.Glassmorphism — the term coined by Polish designer Michal Malewicz in a November 2020 UX Collective article — describes UI panels that look like translucent frosted glass floating over a colourful or photographic backdrop. The recipe is two lines of CSS: backdrop-filter: blur(Npx) saturate(180%) on the panel, plus a semi-transparent background-color: rgba(...). Apple's macOS Big Sur (November 2020) and Windows 11 (October 2021) shipped the look as part of their OS chrome, and Apple's Liquid Glass language across iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 and tvOS 26 (WWDC 2025, 9 June) doubled down on translucent layered surfaces — the most significant Apple UI overhaul since iOS 7.
Need to pick a palette for the underlying gradient or tint first? Try the Color Converter to translate hex values into the rgba alpha channel the generator uses.
| Rule | Example value | Why |
|---|---|---|
background |
rgba(255, 255, 255, 0.25) |
Semi-transparent — without alpha, the blur is invisible because nothing shows through the panel (MDN: backdrop-filter requires transparent or partially transparent background) |
backdrop-filter |
blur(16px) saturate(180%) |
Blurs whatever sits behind; saturate(180%) is Apple's Big Sur recipe — bumps the blurred backdrop's colour to compensate for the wash-out blur introduces |
-webkit-backdrop-filter |
Same value | Safari needs the -webkit- prefix; without it, glass is invisible on iOS Safari and older macOS Safari. Ship both lines |
border |
1px solid rgba(255, 255, 255, 0.18) |
The faint white edge that sells "glass" — drop it and the panel looks like flat rgba, not glass |
border-radius |
12px |
Most glass UI uses 8-16px corners; matches Apple's San Francisco rounded-rect convention |
box-shadow (optional) |
0 8px 32px 0 rgba(31, 38, 135, 0.37) |
Outer shadow lifts the panel off the backdrop — Glass UI's Ui.glass default; drop for a flatter look |
| Property | Glassmorphism | Neumorphism | Claymorphism | Skeuomorphism |
|---|---|---|---|---|
| Core CSS | backdrop-filter: blur() + rgba background + 1px white-translucent border |
Two box-shadow (one dark, one light) on a matching background colour |
Outer box-shadow + inner highlight + soft 3D fill |
Gradient backgrounds + textures + drop shadows mimicking real materials |
| Visual metaphor | Frosted glass panel floating over a scene | Soft plastic pressed out of (or into) a surface | Modeling clay / playful 3D blobs | Real-world objects — leather, wood, brushed metal, paper |
| Background requirement | Needs colourful / photographic backdrop to show blur | Must match container colour exactly | Independent of background | Independent of background |
| Browser support | Chrome 76+, Edge 17+, Firefox 103+, Safari 9+ with -webkit- prefix (caniuse) |
Universal — box-shadow everywhere (IE9+) |
Universal — box-shadow everywhere (IE9+) |
Universal — gradients/images everywhere |
| Popularised | Apple macOS Big Sur (Nov 2020); term by Michal Malewicz (Nov 2020); Apple Liquid Glass (WWDC 2025) | Alexander Plyuto Dribbble concept (Dec 2019) | Hype4 Academy (2021) | Apple iOS 1-6 (2007-2013); skeuomorphism era ended with iOS 7 (2013) |
| Best for | Modal overlays, sticky nav, sidebars over photo/gradient | Decorative cards, toggles, hero sections | Buttons, illustrations, playful UIs | Era-specific design (mostly abandoned 2013+) |
| Common pitfall | Text legibility over busy backgrounds; mobile GPU cost | Invisible buttons; WCAG contrast failures | Heavy/cartoonish if overused | Looks dated outside specific genres (audio plugins, retro UIs) |
The panel needs a transparent or semi-transparent background for the blur to show through. backdrop-filter blurs the pixels behind the element — if the element itself is opaque (e.g., background: #fff), there's nothing to look through. Set the background to rgba(255, 255, 255, 0.25) or similar and you'll see the blur. MDN spells this out: "to see the effect the element or its background needs to be transparent or partially transparent".
opacity: 0.9 to a parent?Parents with opacity less than 1, a non-none filter, mix-blend-mode, mask, or clip-path become a backdrop root — they cap what backdrop-filter can see. Inside that parent, the blur only samples pixels between the parent and the child glass element, not the page behind the parent. Fix: move the opacity to a sibling, or set the tint via rgba alpha on the parent's background instead of the opacity property.
Different jobs. Glassmorphism for overlays sitting over a colourful or photographic background — modals, sticky navs, sidebars, hero cards over images. Neumorphism for decorative surfaces on a solid coloured background — dashboard cards, toggles, marketing widgets — but it has well-documented WCAG contrast failures and shouldn't be used for primary CTAs. Claymorphism for playful, 3D-illustrated UIs — kids' apps, gaming, casual brands. Skeuomorphism (real-world textures) is mostly retired outside audio plugins. For utility UI that just needs to be readable, a plain box-shadow: 0 4px 12px rgba(0,0,0,0.08) card beats all of them.
It's GPU-accelerated, but it's not free. backdrop-filter triggers compositing and effectively re-paints what's behind the element each frame; nesting glass inside glass compounds the work because each layer has to re-sample the backdrop. Real-world reports — shadcn/ui issue #327 (backdrop-blur tanking dialog open performance) and Mozilla bug 1718471 (blur laggy on tables, eventually fixed in Firefox 2022) — describe noticeable lag when many cells or list items all use blur. Rules of thumb: keep glass to a handful of large elements (nav, modal, one card panel) rather than every list item; avoid nesting glass inside glass; on weak Android devices, consider a fallback rgba background without the blur.
Same root issue as neumorphism: low contrast. Text sitting on a translucent panel over a varied background can fall below WCAG 2.2's 4.5:1 contrast ratio for normal text (3:1 for large text), and the contrast actually fluctuates as the backdrop scrolls or changes. Mitigations: use a higher opacity panel (0.6+ alpha) under text, ensure the text colour clears 4.5:1 against the worst-case backdrop pixel under the panel (not just the average), and add a @media (prefers-reduced-transparency: reduce) fallback that swaps the rgba background for an opaque solid for users who've requested reduced transparency at the OS level.
-webkit-backdrop-filter prefix in 2026?The unprefixed backdrop-filter is now Baseline 2024 on MDN — supported across current Chrome, Edge, Firefox 103+, and Safari. But Safari users on older iOS versions (pre-iOS 18) and older macOS still rely on -webkit-backdrop-filter, so the conservative recipe is to ship both lines. Cost is one extra line per rule. The generator output includes both by default.
Four cases. Long-form text content — articles, docs, forms with many fields — fluctuating contrast makes reading tiring. Data-dense dashboards — tables, charts, and small text need solid backgrounds for legibility. Older / low-end Android devices — backdrop-filter blur can drop frame rate noticeably; serve a solid rgba fallback. Print or PDF export — backdrop-filter doesn't reliably render in PDF; if your page might be printed or exported (invoices, reports), test or skip. Use glassmorphism as an accent — hero panel, nav, modal — not as the system-wide surface style.
Each engine implements the blur kernel slightly differently. Safari (WebKit) historically used a softer, slightly less intense blur for the same blur(Npx) value than Blink/Chromium. The visible difference is small at typical blur values (10-20px) but noticeable at the extremes. If pixel-perfect cross-browser matching matters, test on real devices — emulators don't always reproduce the blur character — and tune the blur value slightly higher in Safari if needed.
Technically yes — backdrop-filter is animatable per the spec — but it's one of the most expensive properties to animate. Animating blur(0px) → blur(20px) on hover forces a full re-paint of the area behind the panel every frame. Cheaper approximation: keep the blur constant and animate opacity or background-color's rgba alpha instead. If you must animate the blur itself, restrict it to short transitions (≤300 ms) and confine the animated element so it doesn't redraw a huge backdrop area.