21 CSS Liquid Glass Cards

Liquid Glass is Apple's design language announced at WWDC 2025 (June 9-13) that ships across iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, tvOS 26 and visionOS — the biggest UI overhaul since iOS 7 in 2013. The core visual principle: UI surfaces behave like real physical glass — they refract the content beneath them (not just blur it), they catch specular highlights from an implied light source that responds to device orientation, and they distort in liquid-like ways when the user interacts. It's the aesthetic Vision Pro shipped with in 2024, now backported to every Apple platform. For cards specifically, that means: analytics widgets that lens the chart lines behind them, product feature cards with depth distortion around their edges, pricing matrices where the highlighted plan visually protrudes, and payment checkout cards where the credit-card art picks up a subtle iridescent sheen. Every premium SaaS product targeting Apple-first customers (Superhuman, Linear, Notion, Framer, Cron, Raycast, Arc Browser, Cursor) has adopted or is adopting this aesthetic because their tier-1 (US / UK / CA / AU / DE) user base spends their day inside iOS 26 and macOS Tahoe. Web products that don't adapt look dated fast — the same way iOS 7's flat design retired every skeuomorphic app in 2013. This collection ships the 21 card patterns that map to real Google search demand from front-end engineers building these products.

Two production approaches ship here. Simple approach (most demos): layered backdrop-filter — backdrop-filter: blur(20px) saturate(180%) on the card surface, plus a subtle inner-highlight box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), plus a ring-1 ring-white/40 outer stroke that catches the ambient light. This produces the “frosted with specular rim” look that Apple's Control Center and iOS 26 Notification Center use. Advanced approach (Demo 01 Analytics Widget, Demo 14 Analytics Chart Card, Demo 15 Digital Coupon, Demo 19 Smart Home Thermostat): SVG <filter> with <feTurbulence baseFrequency="0.02"> generating a subtle noise map, fed into <feDisplacementMap scale="8"> that physically warps the underlying pixels. Reference the filter with filter: url(#lg-NN-refract) on a decorative ::before glass layer that sits below the card content (higher z-index) so text stays sharp while the pixels behind the glass genuinely bend. Gooey morph pattern (Demo 18 Media Slider Knob, Demo 20 Wizard Progress): feGaussianBlur+feColorMatrix alpha-threshold filter on a shared group so touching elements visually fuse — the bubble grows out of the track like a liquid drop. Chrome, Safari (with -webkit-), and Firefox 103+ all support SVG filters on HTML for years. GPU cost is real (~4-8ms per composite frame) so cap the refraction filter to hero cards, not every card in a scrollable feed. Use contain: layout paint + isolation: isolate on the card wrapper to fence the expensive blur so it never repaints the whole page — this is the INP-safe pattern most demos here document.

SaaS dashboards (Stripe Sigma / Linear Insights / Vercel Analytics / Amplitude / Mixpanel) — Demo 01 (Liquid Glass Analytics Widget) and Demo 14 (Analytics Chart Card) are the KPI-widget-with-refracted-chart patterns; Demo 02 (Draggable Glass Kanban Card) is the Linear/Trello/Jira board card. Fintech payments (Stripe / Ramp / Brex / Mercury / N26 / Trade Republic) — Demo 04 (Interactive Glass Pricing Matrix) is the monthly/yearly toggle pricing card that Stripe Billing / Chargebee / Recurly / Superhuman ship (VERY HIGH tier CPM at $25-45); Demo 10 (Glass Payment Checkout Card) is the PCI-DSS-compliant credit card entry with the iridescent card-art reflection (VERY HIGH tier CPM at $25-45); Demo 12 (Crypto Wallet Balance Widget) is the Coinbase Pro / Metamask / Phantom / Rainbow wallet-balance card pattern with the neon gradient border (VERY HIGH tier at $25-45). E-commerce (Shopify / WooCommerce / BigCommerce) — Demo 15 (Digital Coupon / Discount Card) is the promo-code card with hover-reveal lens that Shopify, Rakuten, Honey and loyalty apps use. Onboarding + checkout (Auth0 / Okta / Superhuman / Vercel) — Demo 09 (Secure Glass Login Form Card) with focus-ring glow and floating labels; Demo 20 (Multi-Step Wizard Progress Card) with the gooey liquid progress track for signup flows, checkout wizards and SaaS onboarding. Web3 wallet-connect (Uniswap / OpenSea / SNKRS drops) — Demo 11 (Glass NFT Collectible Card) is the refractive protective-case NFT card that OpenSea / Blur / Magic Eden collections use; Demo 12 doubles as the wallet-connect balance display. Marketing landing pages (Stripe / Linear / Vercel / Framer / Notion) — Demo 03 (Glassmorphic Product Feature Card) with depth distortion; Demo 06 (Horizontal Scroll Case-Study Cards) with scroll-snap morph. Media / consumer apps — Demo 07 (Refractive Music Player Widget) that Spotify / Apple Music / SoundCloud web players use; Demo 08 (Minimalist Weather Glass Card) for the Apple Weather / Carrot Weather register; Demo 18 (Media Slider & Knob Card) for volume/EQ panels with gooey bubble tooltips. About + team pages — Demo 05 (Layered Glass Profile Card) for user dropdowns; Demo 16 (Hover-Reactive Profile Bio Card) with warped drop-shadow avatar; Demo 17 (Team Member Spotlight Card) with mouse-tracking spotlight reflection. Smart home + IoT dashboards (Google Nest / Amazon Alexa / Ecobee / SmartThings / Apple Home) — Demo 19 (Smart Home Thermostat Card) with the radial dial that lens-distorts the temperature grid — a HIGH tier CPM vertical ($15-25) for IoT SaaS and home-automation affiliate content. Gaming portals — Demo 13 (Game Inventory Slot Cards) for the bare grid and Demo 21 (RPG Game Inventory HUD Card) for the framed HUD panel that Steam / Epic / Diablo IV / Path of Exile inventory grids use with the hover-shimmer reflect. Every demo is hand-coded CSS with optional vanilla JS — copy the HTML + CSS panels, drop them into any stack, ship.

Three disciplines apply everywhere. First, layout reservation — every card reserves its final box before render so Cumulative Layout Shift stays 0. Cards that animate their size (Demo 04 pricing toggle, Demo 20 wizard step advance) animate transform, padding, or max-height on inner elements — never the card's own containing block — so surrounding content stays put. Second, GPU-safe animation properties only — every transition animates transform, opacity, filter, and backdrop-filter. Never width, height, margin, padding (in the containing-block sense), or top / left — those trigger the layout + paint pipeline on every frame and destroy Interaction to Next Paint scores on real mobile hardware. Third, paint isolation — every card sits in a contain: layout paint + isolation: isolate wrapper so the expensive backdrop-filter blur is fenced to its own compositor layer and never repaints the whole page. Cards using SVG refraction (Demo 01, 14, 15, 19) additionally cap the SVG filter to a single hero surface because SVG filters on HTML elements have a real ~4-8ms per-composite-frame cost — acceptable on one card, not acceptable on every card in a scrollable grid. Gooey-morph demos (Demo 18, 20) restrict the feGaussianBlur+feColorMatrix filter to a small local group so the fusion effect stays cheap. Result: every demo lands under Google's 200ms INP threshold on a mid-tier Android device even with the heaviest backdrop-filter stack active.

Glass has a real accessibility problem: text over a translucent surface fails contrast when the underlying content is bright, and the frosted blur reads as visual noise for users with cognitive or low-vision needs. Every card here addresses all three concerns explicitly. Contrast — text sits on a solid-enough tint that WCAG 1.4.3 AA (4.5:1 for normal, 3:1 for large-text) passes over the darkest realistic backdrop. The trick is the backdrop-filter: saturate(1.8) component: it boosts saturation of what's behind the glass, which lets the text sit on a lower opacity glass surface without losing readability. Demos with critical numeric readouts (Demo 01 Analytics KPI, Demo 10 Payment total, Demo 12 Crypto balance, Demo 14 Chart KPI, Demo 19 Thermostat temperature) additionally place the number on a near-opaque inner chip so the digits never drop below AA. Motion — every animated demo respects @media (prefers-reduced-motion: reduce) with an appropriate fallback: static-poster settled state for kanban drag (Demo 02), instant-swap state changes for pricing toggle (Demo 04), and disabled ambient sweeps for the shimmer inventory (Demo 13, 21). Transparency — Apple introduced prefers-reduced-transparency in Safari 17 / iOS 17 alongside the new Reduce Transparency system setting; every card checks it and swaps to solid tint when the user opts out (critical for GPU-heavy refraction demos where the visual effect is expensive AND non-essential). Keyboard + landmark semantics — every card is a real <section> or <article> landmark, interactive controls carry proper aria-pressed / aria-current / aria-live where state changes, native <input type=range> drives Demo 18's slider so screen readers announce values automatically, and every touch target hits the WCAG 2.5.5 44×44px minimum. This is the accessibility floor that Section 508 (US federal procurement), EN 301 549 (EU / Germany public sector), AODA (Ontario), DDA (Australia), and the European Accessibility Act (June 2025) all require.

Baseline support is broad but the advanced primitives cluster in modern engines. backdrop-filter — Chrome 76+, Safari 14+ (with -webkit- prefix), Firefox 103+. Every demo includes the -webkit-backdrop-filter fallback so Safari 14-17 users still get the frost. Demos ship a canonical @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) graceful-degrade block that swaps to a solid tint fill — the pattern to copy for anywhere backdrop-filter isn't guaranteed. SVG <filter> on HTML — universal support across every modern Chrome, Safari, Firefox. Refraction demos (Demo 01, 14, 15, 19) and gooey-morph demos (Demo 18, 20) work everywhere; the per-composite-frame GPU cost is the practical ceiling, not browser support. Container queries (@container) — Chrome 105+, Safari 16+, Firefox 110+. Demo 06 (Horizontal Scroll Case-Study) uses container queries to reflow between wide and narrow contexts; browsers without container query support fall back to viewport-based @media queries. @property typed custom properties — Chrome 85+, Safari 16.4+, Firefox 128+. Used in Demo 02 (Kanban drag transform) and Demo 19 (Thermostat radial dial); older browsers fall back to instant jumps (still functional, just less silky). :has() — Chrome 105+, Safari 15.4+, Firefox 121+. Used in Demo 04 (Pricing Matrix) and Demo 18 (Media Slider bubble visibility) to drive state from a sibling's :checked/:active state without JavaScript. Every advanced-primitive demo carries an inline @supports fallback so older browsers get a working version, not a broken one. Tier-1 (US / UK / CA / AU / DE) traffic on evergreen browsers gets the full experience; the long tail on IE-era enterprise browsers gets the graceful degrade.

Four honest trade-offs. Bundle cost — Aceternity UI, Magic UI, and shadcn's glass components all ship as React components on top of Framer Motion (60KB+ once you include React DOM), Radix UI primitives (~40KB), and their own utility CSS. That's ~120-150KB gzip just to render a glass card. Every demo in this collection is either 100% pure CSS (12 of 21) or CSS + under 60 lines of vanilla JavaScript (9 of 21) — the entire collection totals under 20KB uncompressed of framework-free code. Framework lock-in — Aceternity requires React. Magic UI requires React. shadcn requires React + Radix + Tailwind + a specific project structure. Framer Motion requires React and a specific state model. These 21 demos are framework-agnostic — the HTML + CSS + JS panels drop into any stack (Astro, Next.js, SvelteKit, Vue, plain HTML, Ruby on Rails ERB, Django templates) with zero adaptation. License and cost — Aceternity Pro is $299+/year for their full glass collection. Magic UI Pro is a subscription. shadcn is free but ties you to their specific dependency tree. Every demo here is MIT licensed, free forever, no attribution required (though a link back is always appreciated). Accessibility floor — the popular React glass libraries are rendering-first, accessibility-second. Some of Aceternity's canvas-based glass effects fail every WCAG contrast test on bright backdrops. Every demo here ships with keyboard navigation, focus-visible rings, aria-pressed / aria-current / aria-live, aria-label on icon-only controls, prefers-reduced-motion + prefers-reduced-transparency fallbacks, and passes WCAG 2.2 SC 1.4.3 AA on the darkest realistic backdrop. That said — if you're already on React and don't need the accessibility floor or the zero-bundle guarantee, Aceternity is a reasonable choice for prototyping. This collection specifically serves the case where you want the Liquid Glass aesthetic without the React wrapper, without the subscription cost, and without the WCAG shortcuts.

Yes on both. Every card is MIT licensed — free for personal and commercial projects, no attribution required (though a link back to codefronts.com is always appreciated). Every demo is plain HTML + CSS + optional vanilla JS with no build step, no framework wrapper, no dependencies. Drop the HTML into a React component's JSX (with className instead of class), a Vue single-file component's template, a Svelte component, an Astro island, or a SvelteKit page — the CSS ships as a scoped module, an inline <style> block, or a Tailwind arbitrary-value paste. Server-side rendering — every demo renders correctly on the server without hydration flash. Cards that ship with vanilla JS handlers (Demo 02 kanban drag, Demo 04 pricing toggle, Demo 07 music player, Demo 15 coupon reveal, Demo 16/17 profile hover, Demo 18 media sliders, Demo 19 thermostat dial, Demo 20 wizard progress) use plain event listeners with AbortController for cleanup or are pure event delegation — safe for React StrictMode double-mount. Content-Security-Policy — demos with strict CSP (script-src 'self' without 'unsafe-inline') work by default because no demo uses inline onclick handlers; the JS runs from external files that the CSP allowlist can permit. Vue 3 v-model bindings work on the demos with form controls (pricing toggle, media sliders, thermostat dial, login form, payment checkout). Angular, Blazor, HTMX, Turbo, Rails ERB, Django, and Laravel Blade all work — the HTML + CSS + JS is framework-agnostic. If you're on Tailwind, the CSS ports cleanly — backdrop-blur, bg-white/15, ring-1 ring-white/40, and arbitrary values like backdrop-blur-[24px] cover most of the utility mapping; SVG filters and named keyframes belong in tailwind.config.js under extend.keyframes + extend.animation.