25 CSS Glassmorphism Cards

A glassmorphism card is a translucent card component whose surface uses the browser's backdrop-filter: blur() to sample and blur whatever colorful content sits behind it — giving the illusion of frosted glass. Popularised by Michal Malewicz around 2020 and canonized by Apple's Big Sur (2020), it's the most-copied design pattern of the 2020s and still the default for premium SaaS dashboards, fintech wallets, and Web3 UIs in 2027. The canonical recipe, which every card in this collection builds on then specialises: background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28); border-radius: 20px; padding: 24px;. The critical details most tutorials get wrong: (1) always ship both backdrop-filter AND -webkit-backdrop-filter — Safari < 15 required the prefix and iOS Safari still respects it for older builds; (2) the 1px inset white top-border via box-shadow is what catches the light and makes the card look like real glass — without it you have a translucent square; (3) the saturate(180%) boost compensates for how blur desaturates color underneath — real frosted glass amplifies color, not dulls it; (4) the card MUST have colorful, textured, or high-contrast content behind it — glassmorphism on a plain white background looks like nothing; every demo in this collection ships a themed backdrop (gradient mesh, animated blobs, photo, or aurora) so the frosting actually reads; (5) @supports fallback for Firefox ESR / old Safari that lack backdrop-filter: @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: rgba(30,30,40,0.85); } } so text stays legible. Modern extras: @property-typed --glow for animated glowing borders (topic 22), light-dark() function for automatic dark-mode swap (topic 23), oklch() for perceptual color mixing on the tinted fill (used throughout), and CSS container queries so the card scales its padding by container width. Every demo in this collection is copy-paste ready — pick a topic, paste the HTML + CSS into your project, done.

Four distinct design patterns often confused. Glassmorphism (this collection): translucent panel + backdrop-filter blur + subtle white border. 2020 aesthetic popularised by Apple Big Sur, Windows 11 Mica, and every SaaS landing page since. Use for: SaaS dashboards over gradient backgrounds, crypto wallets over colorful mesh, login cards over hero photos, feature highlight cards. Liquid Glass (see our 21 CSS Liquid Glass Cards): Apple's 2025 iOS 26 / macOS Tahoe / visionOS design language. Adds light refraction, iridescent border animations, and kinetic depth via @property-driven conic gradients. Feels alive; glassmorphism feels frozen. Use for: iOS-native-feeling PWAs, premium consumer apps, product hero cards where you want to signal 'crafted, 2025+'. Requires modern browsers (Chrome 115+, Safari 17+). Frosted Glass (see our 16 CSS Frosted Glass Effects): synonym for glassmorphism in casual usage, but in strict UI-design terminology 'frosted' emphasises heavier blur (32-48px) with less transparency and more prominent inner-light suggestion. Best for full-viewport overlays (login modals, VisionOS-style docks, media-player footers) where the underlying content is decoration, not information. Neumorphism (see our CSS Neumorphism): completely different pattern — opaque, monochrome, uses paired inner + outer shadows to make elements look 'extruded' from the background. Peaked in 2020, still used for smart-home dashboards, calculator UIs, meditation apps. Decision rule: colorful content behind the card → glassmorphism or liquid glass. Monochrome premium feel → neumorphism. iOS 2025+ aesthetic → liquid glass. Everything else in the glass family → glassmorphism. Never mix neumorphism with glassmorphism on the same surface — they contradict each other's depth-cue vocabulary and the result looks confused. Cross-linking: this collection focuses on card-specific glassmorphism patterns (25 topics × 2 variants). For the broader glassmorphism pattern applied to modals, navbars, sidebars, inputs, see 12 CSS Glassmorphism Designs.

Browser support in 2027: Chrome/Edge 76+ (July 2019), Safari 9+ with -webkit- prefix (2016) — Safari 18+ ships unprefixed, Firefox 103+ (July 2022, feature flag until 103), Samsung Internet 12+. Effective coverage: ~97% of global traffic per caniuse (2027 data). The remaining 3% are older Firefox ESR, corporate Chromium builds without accelerated compositing, and Safari < 15 (mostly retired iOS devices). The mandatory @supports fallback: .glass { background: rgba(30,30,40,0.85); border: 1px solid rgba(255,255,255,0.12); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); } }. The fallback swaps the translucent fill for a ~85% opaque one so text stays legible. Every demo in this collection ships this pattern. Performance ceiling: backdrop-filter is GPU-composited but expensive — Safari does the blur on the CPU on some older iOS devices, causing scroll jank. Guardrails: (1) never animate backdrop-filter values (blur radius, saturation) — animate opacity or transform on the card container instead; (2) keep backdrop-filter off elements > 50% of the viewport (glass on a full-screen overlay tanks INP on mid-tier Android); (3) pair with will-change: transform on the parent to force GPU compositor promotion; (4) prefer blur(24px) over blur(60px) — the perceptual difference is minimal but the GPU cost scales quadratically. Firefox-specific: backdrop-filter has been supported since Firefox 103 (July 2022) but performance on Linux + older GPUs is measurably worse than Chromium. If a large portion of your traffic is Firefox on Linux, benchmark before committing to heavy backdrop-filter usage. Print stylesheets: backdrop-filter is silently ignored when printing — the fallback opacity fill kicks in via the @supports negation, so print-preview always looks clean. Screenshot tools (Playwright, Puppeteer, headless Chrome): backdrop-filter works but may render slower — bump capture timeouts if your CI hits weird half-rendered frames.

The single biggest glassmorphism failure in production audits: text on translucent surfaces fails WCAG SC 1.4.3 contrast (4.5:1 for normal text, 3:1 for large text). When your card is 30% opaque and the background gradient shifts, the effective contrast on the text can drop from 8:1 to 2.5:1 across a single scroll. Four rules to make glassmorphism cards accessible: 1. Boost the tinted fill opacity high enough to guarantee minimum contrast on the worst-case background pixel. A card with background: rgba(30,30,40, .3) on a bright cyan-to-pink gradient will fail contrast; the same card at rgba(30,30,40, .55) passes. Test against the LIGHTEST and DARKEST pixel your background produces. Every card in this collection uses opacity ≥ 0.4 on the tinted fill layer to guarantee 4.5:1 on the standard content. 2. Never put body text (14-16px) directly on backdrop-filter with no tinted fill. The blur alone doesn't guarantee contrast because blur samples the color underneath. A tinted layer between the backdrop and the text is non-negotiable. 3. Pair color with a non-color cue. WCAG 1.4.1 Use of Color: 'Deposit successful' in green text on a green-tinted glass card must ALSO have a checkmark icon; 'Error' must ALSO have an X icon; hover state must ALSO scale or gain a border, not just change color. Every demo in this collection follows this rule. 4. prefers-reduced-motion swap. Animated glowing borders (topic 22), 3D tilt on mousemove (topic 21), and hover-scale on portfolio cards (topic 20) all wrap their animations in @media (prefers-reduced-motion: reduce) { .glz-NN { animation: none; transform: none; } } so vestibular-disorder users (35% of adults per WebAIM) get a stable readable card. Also: real semantic HTML — <button> for buttons (never <div onClick>), <label for="..."> on every input, alt="" or descriptive text on every image, :focus-visible outline on every interactive element. Regulatory context: US ADA, Section 508, EU EAA (June 2025 enforcement), Canada ACA, UK Equality Act, Australian DDA all treat WCAG 2.2 AA violations as legal issues for public-facing digital products. Domino's Pizza 2019, Beyoncé.com 2019, Netflix 2015 all involved contrast failures on styled surfaces. Testing: axe DevTools, Lighthouse, WAVE, WebAIM Contrast Checker — but WebAIM's checker assumes solid backgrounds, so for glass cards you MUST manually test the effective color at the worst-case pixel. Chrome DevTools > Rendering > Emulate CSS media feature prefers-reduced-motion: reduce to test the motion path.

Modern React UI libraries, ranked by ergonomics + bundle cost for the tier-1 dev audience. Aceternity UI (~$299/yr Pro; free tier limited): React-only, opinionated aesthetic with generous use of glass, gradients, and Framer Motion animations. Beautiful defaults, but you're paying for design + shipping ~150KB of Framer Motion runtime + tied to React. Their glass card component is a wrapper around Tailwind's backdrop-blur utility + Framer Motion for hover animations. Every demo in this collection replicates the effect in pure CSS + optional 5-line vanilla JS at zero runtime cost. Magic UI (free, MIT): another React + Framer Motion library. Similar tradeoff — beautiful cards, ~130KB dependency chain. shadcn/ui Card: not glassmorphism out-of-box, but composable with Tailwind's backdrop-blur-xl bg-white/10 border border-white/20 utilities. Copy-paste primitive under Radix. Best-in-class for React + Tailwind stacks. Every recipe in this collection has a Tailwind equivalent shown in its customization field. MUI Card (~15KB tree-shaken from MUI's 100KB+ full bundle): Material Design opinionated. Glassmorphism requires overriding MUI's default surface tokens via theme customisation — verbose but works. Overkill for glass unless you're already using MUI throughout. Chakra UI Card: same story as MUI; solid but heavy. Mantine Card: similar; excellent DX; requires provider setup. Ant Design Card: enterprise-first, verbose API, ~40KB from AntD. What this collection gives you: framework-agnostic pure CSS. Zero runtime, zero bundle cost, zero CVE surface. Every recipe drops into React, Vue, Svelte, Astro, Next.js, plain HTML unchanged. For 90% of production glassmorphism-card needs, the pure-CSS approach wins on Core Web Vitals (INP, TBT, LCP), first-paint speed, and long-term maintainability. Reach for a library when: (a) you need per-card physics-based interactions Framer Motion handles well, (b) you're already deep in the library's design tokens, (c) you need imperative programmatic control (mount/unmount, promise-based reveal). Otherwise: copy from this collection and save 15-150KB per page.

Dark-mode glassmorphism is where 80% of shipping designers fail. Naive approach: [data-theme="dark"] .glass { background: rgba(0,0,0,0.3); }. This looks fine on a colorful background but disappears against a dark hero image — the tinted fill is dark, the backdrop is dark, the border becomes the only visible edge. Correct approach uses two-token separation: keep the border + shadow tokens semantic ("card-edge"), swap ONLY the fill: .glass { background: var(--glass-fill); border: 1px solid var(--glass-edge); backdrop-filter: blur(24px) saturate(180%); } :root { --glass-fill: rgba(255,255,255,.14); --glass-edge: rgba(255,255,255,.22); } [data-theme="dark"] { --glass-fill: rgba(255,255,255,.06); --glass-edge: rgba(255,255,255,.14); }. In dark mode you STILL use a light-toned fill (just at lower opacity) because the glass is meant to catch light, not swallow it. This preserves the frosted-edge shimmer regardless of underlying content. Modern alternative using the light-dark() CSS function (Chrome 123+, Safari 17.5+, Firefox 120+): :root { color-scheme: light dark; } .glass { background: light-dark(rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid light-dark(rgba(255,255,255,.22), rgba(255,255,255,.14)); }. Single declaration, browser picks based on OS + color-scheme. Fallback via @supports (background: light-dark(red, blue)) for older browsers to keep the two-token pattern. Topic 23 in this collection is the reference implementation. Also critical: in dark mode the boxed shadow needs to be MORE prominent, not less — a card that reads as elevated on white background reads as flat on black. Bump the shadow blur + spread: [data-theme="dark"] .glass { box-shadow: 0 40px 80px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.3); }. Tailwind dark-mode recipe: bg-white/[0.14] dark:bg-white/[0.06] border-white/[0.22] dark:border-white/[0.14] backdrop-blur-xl. Test in both before shipping: Chrome DevTools > Rendering > Emulate CSS media feature prefers-color-scheme: dark, and never assume the light version 'just works' at a lower opacity in dark — the depth cues invert.

backdrop-filter is GPU-composited (fast on modern hardware) but has measurable Core Web Vitals costs at scale. The three metrics to watch: (1) INP (Interaction to Next Paint) — Google's flagship 2024 metric replacing FID. Hover/click on a card that triggers a backdrop-filter change or scale can push INP over 200ms on mid-tier Android. Mitigation: animate transform or opacity on a parent wrapper, keep backdrop-filter static on the card itself. (2) LCP (Largest Contentful Paint) — glass cards on above-the-fold layouts add render-blocking layers. If your hero card has 3 stacked glass layers each with backdrop-filter: blur(60px), expect LCP over 2.5s on 4G. Mitigation: single glass layer above the fold; reserve stacked-glass compositions for below-fold sections. (3) TBT (Total Blocking Time) — Chrome's Lighthouse measures long tasks > 50ms. backdrop-filter on scroll (parallax + blur) generates long paints; keep glass elements position: fixed or off the scroll critical path. The 'too much glass' rule: more than 4-5 glass elements simultaneously visible on the viewport tanks performance. Test with Chrome DevTools > Performance panel > record scroll → look for red paint bars > 16ms. If your design needs 10 glass cards visible at once, use a solid-fill fallback below the fold OR virtualize (only render glass on cards in the viewport, swap to solid when scrolled off). Safari specific: iPad Pro M2 handles backdrop-filter beautifully; older iPad (2020) with A12 chip visibly stutters at > 3 concurrent glass elements. iOS Safari < 15 falls back to the @supports opacity variant automatically. Firefox specific: Firefox 103+ supports backdrop-filter but on Linux with software rendering the blur is CPU-computed and painful. Detect via @media (prefers-reduced-transparency: reduce) (Safari 17+, Firefox 113+) and swap to solid fill — this respects both Safari's user preference AND acts as a proxy for 'low-power device' hints. Testing: Chrome DevTools > Performance Insights (2027) has a dedicated 'Backdrop Effects' pane that flags every backdrop-filter element and its per-frame paint cost. Lighthouse's INP audit specifically calls out glassmorphism cards on hover if they push over 200ms. Rule of thumb: glass on 2-4 cards visible = fine. Glass on 15 cards in a scrollable grid = benchmark before ship. Every card in this collection is CLS-safe by construction (no width/height animation), INP-friendly (transforms only), and passes Lighthouse on desktop and mid-tier mobile.

Yes — all 25 topics × 2 variants (50 individual glassmorphism card designs) in this collection are MIT licensed and free for personal AND commercial use, including client projects, SaaS products, mobile apps (via a web wrapper like Capacitor/Tauri), e-commerce sites, design systems, Chrome extensions, open-source libraries, tutorials, and portfolio pieces. The MIT license requires only that you keep the copyright notice if you redistribute the source code AS-IS (e.g. as a template repo); in shipped production HTML/CSS you've adapted for your product, no visible attribution is needed. If you ship one as part of an open-source component library, UI kit, course material, or Codepen collection, a one-line credit pointing to https://codefronts.com/components/css-glassmorphism-cards/ is appreciated but not legally required. Contributing back (submitting improvements via issue or PR) is welcome. Accessibility: every card honours prefers-reduced-motion: reduce (animations fall back to static), uses semantic HTML, ships @supports fallbacks for browsers without backdrop-filter, and is designed to work with keyboard navigation + screen readers — see the WCAG FAQ above for the full a11y pattern. Verify your specific brand colors + backdrop combos with axe DevTools, Lighthouse, WAVE by WebAIM, or the WebAIM Contrast Checker before shipping to EU EAA (June 2025 enforcement) / US ADA + Section 508 / Canada ACA / UK Equality Act 2010 / Australian DDA audits — the demos are AA-compliant by default but final color choices and layout context matter (glass cards over dynamic photo backgrounds especially — test against your specific worst-case pixel). Related collections: 21 CSS Liquid Glass Cards (Apple iOS 26 / macOS Tahoe aesthetic — sibling), 12 CSS Glassmorphism Designs (the broader pattern applied to modals, navbars, sidebars, inputs — parent), 16 CSS Frosted Glass Effects (heavier-blur full-viewport surfaces — cousin), 20 CSS Cards (broader card gallery), CSS Card Hover Effects. Related tools: CSS Glassmorphism Generator if we have one, CSS to Tailwind converter to convert any recipe to Tailwind utility classes.