Dark Glassmorphism
also known asdark glass UI · frosted dark panel · smoked glass · obsidian glass · dark frosted glass
The frosted-glass surface treatment applied on a dark base — translucent panels with backdrop blur over a deep, colorful backdrop.
Dark glassmorphism takes the same recipe as classic glassmorphism — a translucent surface with `backdrop-filter: blur()` floating over a colorful backdrop — and inverts the contrast. The panel is dark and slightly tinted, the hairline border picks up specular light from the layer behind it, and the colorful backdrop is usually a deep aurora, mesh gradient, or out-of-focus photograph in the navy / violet / teal range.
The register is more cinematic and more premium than light glassmorphism. Light glass reads as friendly and airy; dark glass reads as deliberate, late-night, high-end. It shows up on system control panels, music and video apps, premium dashboards, and any product where the brand wants the surface itself to feel like considered hardware.
The execution is harder than light glass because dark surfaces show banding and noise more readily. Good dark glass needs: a 1px hairline highlight on the top edge (to fake reflected light), a soft drop shadow underneath (to lift the panel off the backdrop), a slight saturation boost in the backdrop-filter so the colors behind don't go muddy, and enough blur radius (20–32px) that the underlying composition reads as light, not as content.
Glassmorphism as a named pattern emerged around 2020 with Big Sur and the broader translucent-OS-control trend. The dark variant gained ground from 2022 onward as variable hardware (display HDR, P3 color) and CSS `backdrop-filter` support made deep, saturated backdrops practical without banding.
- Floating control panels and command palettes over rich backdrops
- Premium dashboards, media players, creative tools
- Mobile-style notification and toast surfaces over photographic backgrounds
- Modal and popover surfaces that need to read as 'on top of' a colorful page
- Flat dark UIs with no colorful backdrop — the blur has nothing to do
- Long-form content surfaces — translucency hurts text contrast
- Low-power devices where backdrop-filter tanks scroll performance
- +Use a backdrop with real color variation (aurora, mesh, or photo) so the blur has signal to work with
- +Add a 1px top-edge hairline highlight at ~12% white to fake reflected light
- +Boost saturation inside backdrop-filter (e.g. `blur(24px) saturate(160%)`)
- +Drop a soft shadow underneath the panel so it lifts off the backdrop
- +Keep text contrast on the panel at AA minimum — measure against the worst-case backdrop
- −Don't use dark glass over a flat background — it just looks like a dark rectangle
- −Don't stack multiple glass layers — the second one has nothing to blur
- −Don't use 100% black panels — tint slightly toward the backdrop hue (e.g. navy 8%)
- −Don't forget a fallback: where backdrop-filter is unsupported, render a solid dark surface
Build a dark glassmorphism floating panel in React + Tailwind. Backdrop (required — glass needs something to blur): a full-section `<div>` with a deep aurora mesh background, e.g.: ```css background: radial-gradient(at 20% 20%, oklch(0.45 0.18 280) 0%, transparent 50%), radial-gradient(at 80% 30%, oklch(0.50 0.20 200) 0%, transparent 55%), radial-gradient(at 60% 80%, oklch(0.40 0.22 320) 0%, transparent 50%), #08090F; ``` Glass panel (the card itself): ```css background: rgba(15, 18, 30, 0.45); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), /* top-edge specular hairline */ 0 24px 60px -10px rgba(0, 0, 0, 0.55); /* lift shadow */ border-radius: 20px; padding: 24px; color: #F5F5F7; ``` Fallback: `@supports not (backdrop-filter: blur(1px)) { background: #14161F; }` Content: a small command-palette or notification card with a label, value, and one accent icon. Text contrast must hit AA against the darkest area of the backdrop. Acceptance: panel clearly samples the colorful backdrop through blur, has a visible top-edge highlight, lifts off the page with a soft shadow, and degrades to a solid dark card without filter support.
Paste into Claude Code, Cursor, or Lovable to apply dark glassmorphism to your project.
Textbook examples in the directory
Dark glass. Deep midnight canvas with a faint indigo-violet aurora behind; cards float as smoked glass panes with 32px backdrop-blur and a faint inset top highlight. Depth and theater without going gaudy.
Extreme glassmorphism. Translucent panes float on a vivid aurora mesh — ultramarine, magenta, and mint cyan, blurred to 40px with 200% saturation. Every surface — cards, CTAs, even the primary button — is frosted glass. Nothing is opaque.
Mid-tone soft glass. Warm dusty-sand canvas with a peach-and-rose aurora behind; cards float as cream-tinted frosted panes with 26px backdrop-blur and a faint inset top highlight. The mid-tone is the system.
A studio interface built around real glassmorphism — frosted backdrop-blur cards floating over a soft tonal lavender-bone backdrop. Plus Jakarta Sans for UI, Spectral italic for accent display, a single indigo reserved for the active panel ring and the primary CTA. Built for creative studios, design tools, and product surfaces where the glass IS the interface chrome.
People also ask
What's the difference between dark glassmorphism and just a dark translucent panel?
The blur. Without `backdrop-filter: blur()`, you get a tinted overlay — flat and lifeless. The blur is what samples the colorful backdrop and turns the surface into something that reads as glass.
Why does my dark glass look muddy?
Three usual causes: the backdrop has no color variation (give it a real gradient or mesh), the saturation isn't boosted inside the filter (`saturate(150–180%)` helps), or the panel tint is too opaque (try 30–50% darkness instead of 70%).
Does dark glassmorphism hurt accessibility?
It can. Always test text contrast against the worst-case area of the backdrop the panel might sit over. If the backdrop changes (e.g. behind a scrolling page), pin a darker tint inside the panel so contrast stays predictable.