CSS glassmorphism is the frosted-glass surface from macOS Big Sur, iOS Control Center, and Apple’s WWDC 2025 liquid-glass system. These 22 hand-coded designs cover backdrop-filter mechanics (blur, saturate vibrancy, visionOS depth, tint overlays, SVG refraction, adaptive theming, fallback, contain: paint) plus production surfaces (card, modal, pricing, navbar, tab bar, sidebar, input, toggle, search). Every demo is scoped under .gm-NN, guards prefers-reduced-motion, and stays framework-agnostic.
21 pure CSS1 light JSPublished 10 new designs · Updated on
Four identical glass panels sit over one shared gradient mesh at blur(4px), blur(12px), blur(24px) and blur(40px) so you can eyeball the exact radius your brand needs before you commit a token. Each panel carries its value in a monospace pill, and a decision-guide strip translates the scale into intent — 4px is depth, 40px is privacy.
Published
02 / 22Pure CSSNEW
Backdrop Saturate Vibrancy Boost
Blur alone gives you grey glass. Three panels — blur(20px) with no saturate, with saturate(140%) and with saturate(180%) — show why every Apple material pairs the two: saturation puts back the chroma that averaging pixels takes away. The right-hand panel visibly lifts the magenta and cyan out of the mesh behind it.
Published
03 / 22Pure CSSNEW
visionOS Depth Layer Stack
Four glass sheets stacked front-to-back with rising blur (12 → 16 → 20 → 24px) and falling opacity, each offset a few pixels so the stack reads as physical depth. This is the visionOS rule in one surface: depth is communicated by looking through layers, not by drop shadows — each sheet refracts the sheets behind it.
Published
04 / 22Pure CSSNEW
Glass Tint Overlay Variants
Six glass panels over one background, each tinted with color-mix(in oklab, …) so the tint carries meaning — info, success, warning, danger, neutral and brand. Because the mix happens in oklab, every hue lands at the same perceived lightness, which is what keeps a semantic set looking like a set instead of six unrelated colours.
Published
05 / 22Pure CSSNEW
SVG Displacement Liquid Glass
Real refraction, not a blur: an inline <filter> chains feTurbulence into feDisplacementMap and the panel passes its backdrop through it, so the background warps at the glass edges the way it does through a physical lens. This is the WWDC 2025 liquid-glass look done with web primitives — and it degrades to a plain frosted panel wherever the filter reference is not honoured.
Published
06 / 22Pure CSSNEW
Grain Noise Frosted Glass
The difference between glass and plastic is grain. Two otherwise identical frosted panels sit side by side — one over a clean gradient, one over the same gradient plus a fine feTurbulence noise layer — and the grainy one reads as physical etched glass while the clean one looks like a smudge filter.
Published
07 / 22Pure CSSNEW
Inner Rim Highlight Glass
The detail that separates convincing glass from a translucent rectangle: a two-stop inset rim. A bright inset 0 1px 0 rgba(255,255,255,.5) on the top edge reads as light catching the bevel, a dimmer inset 0 -1px 0 rgba(255,255,255,.15) at the bottom reads as bounce light. Three panels compare no rim, top-only and the full pair.
Published
08 / 22Pure CSSNEW
Adaptive Dark and Light Glass
One glass component, two sets of physics. Flip the surrounding theme and the panel does not just recolour — it re-tunes: light mode drops to blur(12px) with saturate(200%) over a white overlay, dark mode climbs to blur(24px) saturate(140%) over a black one. Same markup, inverted blur maths, driven entirely by custom properties.
Published
09 / 22Pure CSSNEW
Backdrop Filter Fallback Recipe
Glass is an enhancement, never a requirement. Two panels sit side by side — the left one gets real backdrop-filter, the right one is deliberately built as if the browser had none — so you can see exactly what your fallback users see. The recipe: declare the opaque version first, upgrade inside @supports, and fake the depth with a rim plus an inner shadow.
Published
10 / 22Light JSNEW
Contain Paint Glass Optimization
The demo nobody else ships: when not to use backdrop-filter. Six glass cards in a scrolling column, with a toggle that adds or removes contain: paint and a will-change opt-in. Scroll with it off, then on — the FPS read-out and the feel of the scroll tell the same story about compositor cost.
Published
11 / 22Pure CSS
Frosted Glass Card Component
The reference implementation of the whole technique in one card: 24px blur, 180% saturate, a double inset rim, a real photo, and a monospace spec strip that names every value used. If you copy one thing from this collection into a project, copy this — then read demos 01 and 02 to understand why the numbers are what they are.
PublishedUpdated
12 / 22Pure CSS
Frosted Glass Modal Dialog
A native <dialog open> rendered as frosted glass over a dimmed, blurred page — the pattern every product needs and most get wrong. Two layers of blur do the work: a heavy one on the scrim to push the page back, a lighter one on the sheet so it still reads as a surface floating in front of it.
PublishedUpdated
13 / 22Pure CSS
Glassmorphism Pricing Table
A full three-tier table — not a single card — where the middle tier is elevated with a thicker film, a stronger rim and a badge, so the glass itself encodes hierarchy. The monthly/yearly switch is a radio group read with :has(): prices, savings copy and billing notes all change with zero JavaScript.
PublishedUpdated
14 / 22Pure CSS
Sticky Glass Navigation Bar
The classic sticky glass header: position: sticky; top: 0 with 18px blur and 170% saturate, over content that scrolls beneath it. Scroll the panel and watch text pass under the bar — this is the one place where blur cost is always worth paying, because the surface is small and always in view.
PublishedUpdated
15 / 22Pure CSS
Glassmorphism Bottom Tab Bar
An iOS 26 / visionOS-style floating tab bar: a rounded pill of frosted glass hovering above scrolling content, with the active tab carrying an accent tint and a visible label while the others stay muted icons. Tab state is a radio group — fully interactive, zero JavaScript.
PublishedUpdated
16 / 22Pure CSS
Frosted Glass Sidebar Menu
A 20px-blur sidebar pinned to the left of an app shell, with grouped nav sections, hairline dividers, hover states and a profile block at the bottom — while the content column scrolls behind its edge. The layout is one CSS grid; the glass is four declarations.
PublishedUpdated
17 / 22Pure CSS
Glassmorphism Text Input Field
Form fields are where glassmorphism usually breaks: a translucent input with a low-contrast border is unusable. This demo does it properly — a frosted surface with an inner shadow for depth, a 2px :focus-visible ring that survives any backdrop, a real <label>, helper text, and both empty and filled states side by side.
PublishedUpdated
18 / 22Pure CSS
Frosted Glass Toggle Switch
A switch where both the track and the thumb are glass, so the thumb refracts the track it slides over. Built on a real <input type="checkbox" role="switch"> with the :checked sibling combinator — no JavaScript, correct semantics, and a 44px hit area on every row.
PublishedUpdated
19 / 22Pure CSS
Glassmorphism Search Bar
A wide frosted search bar with an inline SVG icon, a clear button, a filter chip and a suggestions panel that appears on :focus-within — the Google-bar pattern rebuilt as glass. Marked up as <search> with role="search", and it never touches a form submit handler, so it runs in any sandboxed playground.
PublishedUpdated
20 / 22Pure CSS
Refractive Glass Card
The displacement technique from demo 05, applied as a real product card: avatar, heading, description, metadata and a CTA — sitting on a lens layer that visibly warps the ruled background beneath it. Where demo 05 teaches the filter, this shows what it looks like carrying actual content.
PublishedUpdated
21 / 22Pure CSS
Tinted Frosted Glass Panel
One brand hue — oklch(0.65 0.2 285) — carried through a single large panel at three labelled intensities, so you can see exactly how much tint your surface can take before the copy on it stops being readable. This is the single-hue depth reference; demo 04 is the multi-hue semantic set.
PublishedUpdated
22 / 22Pure CSS
Layered Stacked Glass Cards
Four glass cards fanned like a held deck, each rotated a few degrees and each refracting the ones behind it. Hover — or focus any card with the keyboard — and the deck spreads: rotation increases, offsets widen, and the depth that was implied becomes explicit. All motion is rotate and translate, so it runs entirely on the compositor.
PublishedUpdated
↗
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
How do I choose the right backdrop-filter blur value for glassmorphism?
Blur intensity is the single biggest lever between subtle depth and full frosted opacity, and each intensity band maps to a distinct product-surface expectation. **4-8px** is the Vercel / Linear / Framer marketing-page pattern — just enough softening to imply depth without obscuring the busy hero background beneath. **10-16px** is the SaaS-dashboard sticky-nav band (Notion, Superhuman, Height) — the nav reads as its own surface while the underlying document is still legible-through. **18-24px** is the iOS 26 Control Center and macOS Tahoe menu-bar pattern — heavy enough that the background becomes ambient colour rather than content, but the surface still refracts real hues. **28-40px** is the true full-frost pattern for onboarding overlays and photo-heavy portfolio grids where content beneath is intentionally reduced to atmosphere. Pair every blur value with a matching saturate() boost (140-200%) — WWDC 2025 confirmed Apple's iOS Big Sur / iOS 26 recipe is 20-24px blur PLUS 180% saturate to preserve chroma the blur would otherwise mute. Demo 01 (Backdrop Blur Intensity Guide) shows 4-panel side-by-side comparison at 4px/12px/24px/40px so you can eyeball which fits your brand. Demo 02 (Backdrop Saturate Vibrancy Boost) demonstrates the saturate-boost recipe. Every glassmorphism surface in the collection is dual-themed via CSS custom properties and includes the -webkit-backdrop-filter Safari prefix.
What is the WWDC 2025 liquid glass effect and how do I recreate it in CSS?
Apple's WWDC 2025 liquid-glass surface introduced across iOS 26, iPadOS 26, macOS Tahoe, and visionOS 2 isn't just backdrop-filter — it's a chained filter pipeline that adds true optical refraction to the frosted-glass base. The recipe: (1) standard backdrop-filter: blur(20px) saturate(180%) for the frosted base, (2) an inline SVG filter chain using an feTurbulence primitive (type fractalNoise, baseFrequency 0.015, numOctaves 2) to generate an organic distortion map, (3) an feDisplacementMap primitive (scale 30) chained after the turbulence to warp the pixels behind the surface, (4) apply via filter: url(#refract) on the panel. The result: panel edges warp the background beneath them like real refracted glass — an image seen through actual physical glass edges bends chromatically, and this is the CSS equivalent. Demo 05 (SVG Displacement Liquid Glass) ships the full recipe and Demo 20 (Refractive Glass Card) applies it inside a product-card layout. The technique works in Chrome 76+, Safari 16.4+ (with the -webkit- prefix on backdrop-filter only — filter: url() is unprefixed), and Firefox 103+. Wrap the entire panel in @supports (backdrop-filter: blur(1px)) and provide a semi-opaque solid fallback for older browsers per Demo 09 (Backdrop Filter Fallback Recipe).
How does glassmorphism perform on scroll-heavy pages, and when should I NOT use backdrop-filter?
Backdrop-filter is one of the most GPU-expensive CSS properties because it forces the compositor to rasterize what's behind the element on every frame. On a static hero it's free; on a scroll-heavy dashboard with 20+ glass cards, it can drop frame rates from 60fps to 20fps on mid-tier hardware (2019 MacBook Air M1, Pixel 6a, Snapdragon 7 Gen 2). Three mitigations from Demo 10 (Contain Paint Glass Optimization): (1) contain: paint on every glass surface — tells the browser this element's paint operations can't leak outside its box, letting the compositor cache more aggressively; (2) will-change: transform opt-in on scroll-linked panels so the compositor promotes them to their own GPU layer BEFORE the first scroll frame instead of mid-scroll; (3) avoid backdrop-filter inside position: sticky elements that pin during scroll — those are the worst offenders because the browser has to re-rasterize the moving background AND the pinning composite work simultaneously. For pages with 20+ glass surfaces, consider the Demo 09 fallback pattern site-wide via @supports not (backdrop-filter: blur(1px)) inverted logic — deliberately opt OUT of glass on low-end devices via @media (prefers-reduced-motion: reduce) or @media (max-width: 768px). Chrome DevTools Performance panel's Layers view + Rendering / Paint Flashing overlay will show you exactly which glass surfaces are re-painting per scroll frame — the ones flashing green on every tick are the ones to contain or drop.
Why does my glassmorphism look great in Chrome but broken in Firefox or Safari?
Three cross-browser gotchas cover 95% of the 'glass works in Chrome, not elsewhere' bugs. **Safari (all versions):** requires the -webkit-backdrop-filter vendor prefix DUPLICATED alongside the unprefixed property — Safari 15.4+ supports unprefixed backdrop-filter but earlier versions (still 4-6% global traffic per Can I Use) need the prefix. Every demo in this collection ships both. **Firefox <103:** no backdrop-filter support AT ALL — the surface just paints as its background colour with no blur. Use @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) to gate the effect and provide a semi-opaque fallback per Demo 09 (Backdrop Filter Fallback Recipe). **Firefox 103+ and Safari:** filter: url(#svg-filter) DOES work but the inline SVG element must be in the SAME document as the CSS reference — cross-document SVG filter references silently no-op. If you're using Demo 05's SVG displacement, the inline SVG needs to sit inside the same component/partial as the CSS rule that references it. Demo 05 documents this in its gotchas field. Also: color-mix(in oklab, ...) needs Chrome 111+/Safari 16.4+/Firefox 113+ — for older browser support, swap to color-mix(in srgb, ...) or provide flat hex fallbacks via CSS custom properties. Test in BrowserStack against Safari 15, Firefox 102, and Samsung Internet 20 (Android's default browser) before shipping glassmorphism to a production audience.
How do I make glassmorphism accessible and WCAG 2.2 AA compliant?
Glassmorphism can catastrophically hurt text contrast because the frosted-glass surface is transparent — the same panel over a red background reads text at 8:1 contrast, then flips to 2:1 (fails WCAG AA) when the user scrolls that panel over a lime-green section. Three patterns from the collection: (1) **Use color-mix(in oklab, ...) with an opaque-ish alpha** (0.55-0.75) rather than aiming for full transparency — the resulting surface stays translucent enough to communicate 'glass' but opaque enough to guarantee text contrast regardless of what's behind. (2) **Layer text on an OPAQUE inner card** inside the glass surface — the glass provides the aesthetic, an inner solid card provides the reading substrate. Demo 11 (Frosted Glass Card Component) uses this pattern. (3) **Test contrast with a colour-blindness simulator** (Chrome DevTools Rendering panel → Emulate vision deficiencies → Protanopia/Deuteranopia/Tritanopia + Achromatopsia) — glass surfaces that pass sRGB contrast often fail for the ~8% of men and 0.5% of women with red-green colour blindness. Beyond contrast: every interactive glass surface (button, toggle, modal) MUST have :focus-visible outline with 3:1 contrast against BOTH the glass surface AND the underlying background — use a solid outline (outline: 2px solid var(--focus-ring); outline-offset: 2px) rather than a semi-transparent one. Every demo includes @media (prefers-reduced-motion: reduce) disabling backdrop-filter transitions for vestibular-sensitive users. All 22 designs are keyboard-navigable, screen-reader-labelled, and pass WCAG 2.2 Level AA text-contrast requirements when placed over the intended background.
Which shipped tools (Vercel, Linear, Stripe, Framer, Apple) use production glassmorphism and how do I match their aesthetic?
Production glassmorphism is now table stakes for tier-1 dev-tool and design-first product surfaces. **Vercel** uses 8-12px blur with 140% saturate on its marketing headers + dashboard sticky navs — subtle depth, generous contrast, no visible chroma shift. Match with Demo 14 (Sticky Glass Navigation Bar). **Linear** uses 20-24px blur on the command palette (Cmd+K) overlay + issue-card hover states + settings modals — heavy frost, distinctly 'Linear' aesthetic via cool-tinted overlays. Match with Demo 12 (Frosted Glass Modal Dialog) + Demo 04's brand-tint pattern. **Stripe** uses light-mode 6-10px blur on documentation code-block hover cards + pricing calculator tooltips — restrained, whisper-quiet glass. Match with Demo 19 (Glassmorphism Search Bar) at light-mode preset. **Framer** and **Arc Browser** ship the heaviest glass (28-36px blur, 200% saturate) on floating overlays and hover previews — full-frost, product-signature-level heavy. Match with Demo 15 (Glassmorphism Bottom Tab Bar). **Apple (iOS 26 / macOS Tahoe / visionOS 2)** ships the full WWDC 2025 liquid-glass recipe — blur + saturate PLUS the SVG displacement refraction for true optical distortion. Match with Demo 05 (SVG Displacement Liquid Glass) and Demo 20 (Refractive Glass Card). Every demo in this collection is dual-themed via CSS custom properties, includes the -webkit-backdrop-filter Safari prefix, guards for prefers-reduced-motion, and works over a colourful ambient background via the standard radial-gradient + linear-gradient composite pattern. Copy the recipe values from the demo's css field, tune the CSS custom property tokens (--blur, --sat, --film, --rim), drop into your product surface, ship.
How is CSS Glassmorphism different from CSS Glassmorphism Cards, Liquid Glass, and Frosted Glass Effect?
codefronts.com ships seven glass collections, each in a distinct lane so the site can rank for the full search-intent spectrum without cannibalisation. **CSS Glassmorphism (this collection)** is the FOUNDATIONAL TECHNIQUE PRIMER — 10 new demos teach backdrop-filter mechanics (blur intensity, saturate vibrancy, visionOS depth, tint overlays, SVG displacement, grain noise, inner rim, adaptive theming, browser fallback, performance) and 12 production surfaces (card, modal, pricing, navbar, tab bar, sidebar, input, toggle, search, refraction, tinted, stacked). Start here to LEARN glassmorphism. **CSS Glassmorphism Cards** ships 25 card-specific variants (credit card, pricing tier, checkout, crypto wallet, profile, weather, music player, event ticket) for when you need a specific card design. **CSS Liquid Glass** covers the general iOS 26 / WWDC 2025 liquid-glass variant with refraction + kinetic depth across buttons, toggles, dropdowns, sliders, tooltips. **CSS Liquid Glass Cards** and **CSS Liquid Glass Navbars** are the card-specific and navbar-specific slices of liquid glass. **CSS Frosted Glass Effect** ships surface-specific variants (login modal, dashboard overlay, sidebar navigation, footer overlay, credit-card payment). **CSS Glassmorphic Navbars** ships 12 navbar-specific glass variants (SaaS landing header, scroll-triggered, cyberpunk, pill, mega menu, mobile off-canvas, accessible high-contrast). If you're not sure which to pick: start with this collection to understand the technique, then move to the specialised collection for your specific component. Every demo across all seven collections uses the same -webkit-backdrop-filter cross-browser prefix, @supports fallback pattern, and prefers-reduced-motion guard.
Do these glassmorphism designs need JavaScript, and can I integrate them with Tailwind CSS, React, Vue, Svelte, or Astro?
20 of 22 designs are pure CSS with zero JavaScript — all backdrop-filter, transparency, borders, shadows, CSS custom properties, and a hidden checkbox input paired with the :checked sibling combinator for interactive state (toggles, expand/collapse). Two demos ship under-25-line vanilla ES2024 JavaScript with zero dependencies: Demo 08 (Adaptive Dark and Light Glass) uses a theme-toggle checkbox plus a :has() selector for theme lifting, Demo 10 (Contain Paint Glass Optimization) uses a click-handler to toggle the contain: paint opt-in class. Every animated demo includes @media (prefers-reduced-motion: reduce) disabling transitions. Framework portability: (1) **Tailwind CSS v3/v4** — use backdrop-blur-md / backdrop-blur-lg utilities for standard values, arbitrary values backdrop-blur-[20px] for exact recipe match, and @theme { --color-glass-film: ... } in v4 for token-driven glass palettes. (2) **React / Next.js App Router** — wrap the demo's CSS in a module.css file and import per component; the SVG displacement filter in Demo 05 goes into a shared filter-sprite component mounted once at the app root. (3) **Vue 3 / Nuxt 4** — drop the CSS into a scoped style block; the :has() selector in Demo 08 works with Vue's reactivity if you toggle a data attribute on the wrapper. (4) **Svelte 5 / SvelteKit** — use Svelte's scoped styles by default; wrap SVG filter definitions in a head component for SSR-safe rendering. (5) **Astro** — components ship the CSS in scoped style blocks that Astro scopes automatically; the checkbox-input plus :has() pattern in Demo 08 works without hydration since it's pure CSS. Copy the HTML markup, adapt to your framework's template syntax, ship — every demo is MIT licensed and free for commercial use with no attribution requirement.
