16 CSS Frosted Glass Effects

Three CSS properties do the entire job. First, on the glass element, set a semi-transparent background — usually background: rgba(255,255,255,0.12) for a light frosted tint. Second, apply backdrop-filter: blur(24px) saturate(180%) (with the -webkit-backdrop-filter prefix for iOS Safari long-tail support) so the browser samples the pixels behind the element and applies a 24-pixel Gaussian blur with a 180% saturation boost — the saturation is what makes the panel feel like real glass rather than plain frosted plastic. Third, add a subtle outer stroke and inset highlight — border: 1px solid rgba(255,255,255,0.22) for the edge plus box-shadow: inset 0 1px 0 rgba(255,255,255,0.28) for the top-edge light-catching bevel. The three combined create a convincing physical-glass surface. Both demos in this collection ship exactly this recipe, tuned for their respective backdrops.

The most common cause: the element behind the glass is a solid opaque colour with no variation, so the blur has nothing to blur. Frosted glass only reads as frosted glass when there's colour behind it to distort — swap your solid background for a multi-stop linear-gradient or a real photo and the effect appears instantly. Second most common cause: an ancestor element has overflow: hidden combined with transform or filter, which creates a new stacking context that clips backdrop-filter's sampling area. Third: some Safari versions before 15.4 need the -webkit-backdrop-filter prefix — always ship both prefixed and unprefixed versions. Fourth: Firefox versions before 103 don't support backdrop-filter at all — Firefox 103+ ships it natively, older versions fall through to the @supports fallback.

They're closely related but not identical. **Frosted glass** is the technical CSS effect — the specific combination of backdrop-filter: blur() plus a semi-transparent background plus an inset highlight. **Glassmorphism** is the broader visual design language named by Michal Malewicz in 2020 that uses frosted glass as its signature material, paired with vibrant multi-colour backdrops (the colourful photo or gradient behind the glass), soft floating shadows to lift the panel off the background, subtle 1-pixel borders, and a general aesthetic of layered translucent surfaces. So: every glassmorphism design uses frosted glass, but not every frosted-glass effect is glassmorphism — you could put a frosted glass panel over a monochrome background and it would still be frosted glass, just not the full glassmorphism aesthetic. Demo 01 in this collection is closer to pure glassmorphism (colourful multi-radial backdrop, floating card); demo 02 uses frosted glass as functional UI chrome (notification overlay) which is more of a system-UI application of the technique.

Three rules to preserve readability without abandoning the effect. First, keep text contrast at WCAG AA levels — at least 4.5:1 for body copy against the effective panel colour. A frosted glass panel with white text needs a dark enough underlying region for the contrast to hold; if your backdrop is bright yellow, the text needs a stronger tint boost via background: rgba(0,0,0,0.30) on the glass. Second, always include a @supports not (backdrop-filter: blur(1px)) fallback with a solid semi-opaque background — browsers without support (Firefox < 103, older Safari) then get a readable dark or light panel instead of transparent text on a busy backdrop. Third, respect @media (prefers-reduced-motion: reduce) for any animated blur transitions — dynamic blur changes can trigger motion sickness in vestibular-sensitive users. Bonus rule: increase the tint alpha (say from 0.12 to 0.20) for users who report low-vision issues by adding a prefers-contrast: more media query.

Yes, but usually not enough to matter. backdrop-filter forces the browser to composite the element on its own GPU layer and re-sample the pixels behind it on every paint — a 24-pixel Gaussian blur is a real GPU operation, not a static image. Best practices to keep it fast: (1) Never nest frosted-glass elements inside other frosted-glass elements — the blur cost compounds and can drop frame rates to 20fps on lower-spec devices. (2) Avoid animating blur values (going from blur(0) to blur(24px) on hover) — the shader recompiles on every frame; use opacity or transform animations instead if you need motion. (3) For panels floating over video backgrounds, add transform: translateZ(0) or will-change: backdrop-filter to force GPU compositing — otherwise some browsers re-render the blur every video frame causing significant jank. (4) Prefer smaller blur values (16-24px) over dramatic ones (48-64px) when possible — the perceptual difference is small but the GPU cost scales with blur radius.

Yes — that's actually the ideal use case since real photos have the colour variety that makes glassmorphism sing. Replace the CSS gradient behind the glass panel with background: url('/hero.jpg') center/cover for a static image. For a video backdrop, use a real HTML video element as the sibling with the glass panel absolutely positioned above it. Two watchouts: (1) The photo should be visually busy enough that the blur produces varied colour through the glass — a solid-colour landscape photo blurs to a boring monochrome panel. Pick photos with 3+ distinct colour regions. (2) On video backdrops, browser GPU load is much higher because every video frame triggers a fresh blur recomputation. Test on an iPhone SE or a mid-range Android before shipping; if the frame rate drops, lower the blur radius or add will-change: backdrop-filter to force better GPU compositing. Demo 01 in this collection ships with a multi-radial-gradient backdrop that stands in for a real photo — swap it for your own image with one CSS line.

Very different. background: rgba(255,255,255,0.2) gives you a translucent overlay — you see the underlying content through it, but nothing gets blurred. The result reads as a coloured film on top of the content, not as glass. backdrop-filter: blur() actively distorts the underlying pixels, which is what your eye interprets as looking through frosted glass. The difference is most obvious over busy backgrounds: with plain transparency, sharp edges and text underneath remain sharp and legible through the overlay (usually visually competing with the overlay's own content). With frosted glass, those edges soften and blur, letting the overlay's content dominate the visual hierarchy while the backdrop's colours still influence the mood. This is why iOS 26 uses frosted glass for notification centre chrome — the underlying app content is still visible enough to preserve context, but blurred enough that the notification stays the focal point.

**Tailwind CSS** ships utility classes that map directly to the CSS properties this collection uses: backdrop-blur-xl = backdrop-filter: blur(24px), bg-white/10 = background: rgba(255,255,255,0.1), border border-white/20 = border: 1px solid rgba(255,255,255,0.2). Copy the structural decisions (blur strength, tint alpha, inset highlight) from these demos and translate to Tailwind utilities in seconds — nothing framework-specific to unlearn. **Glassmorphism.com** is a UI kit that packages pre-styled glass components; for a design system, that's fine, but you pay in bundle size and inherit their design decisions. **Framer's Glass component** is native to Framer Motion and includes animation primitives — if you're building in Framer, use it directly. For any framework where you want portable CSS, the five demos here ship raw so you can lift the technique and drop it into React, Vue, Svelte, Astro, or vanilla HTML with zero adaptation.

The cleanest pattern uses an IntersectionObserver watching an invisible sentinel element at the top of the page — much better performance than a scroll event listener that fires dozens of times per second. Recipe: (1) Place an invisible 1-pixel-tall sentinel element as the first child of your page. (2) Give your position: sticky navbar a base state of background: transparent + backdrop-filter: none. (3) In JS, create an IntersectionObserver that watches the sentinel; on state change, add or remove .is-scrolled on the navbar. (4) Style .is-scrolled with background: rgba(255,255,255,0.14) + backdrop-filter: blur(24px) saturate(180%) + a subtle bottom border. Add transition: background .35s, backdrop-filter .35s to the base navbar so the state change animates smoothly. Total JS: about 8 lines. Zero scroll-event listeners, zero throttling, zero libraries. Demo 03 (CSS Sticky Glassmorphism Navbar Blur on Scroll) ships the full recipe. Falls back gracefully — browsers without IntersectionObserver simply never trigger the class and the navbar stays transparent (page still works).

The critical requirement: the sidebar needs colourful content BEHIND it in the stacking order, otherwise backdrop-filter has nothing to blur. Correct setup: give your dashboard's outer container a colourful background (gradient, photo, or a mesh of radial-gradients) — that's your visual base. Then use CSS Grid: display: grid; grid-template-columns: 260px 1fr to put the sidebar in a 260-pixel left column and the main content in the remaining space. The sidebar itself uses background: rgba(255,255,255,0.10) + backdrop-filter: blur(28px) saturate(180%) + a right-side border. The main content area on the right is rendered on top of the same colourful backdrop as a semi-opaque overlay (typically rgba(15,20,30,0.75) with its own solid card backgrounds inside), so both regions of the dashboard share the same visual foundation while only the sidebar shows glass. Demo 04 (CSS Frosted Glass Sidebar Navigation Menu) ships this pattern with 6 nav items, badges, and a user profile card at the bottom. On mobile the sidebar collapses to hidden — real production would trigger a hamburger drawer via a <dialog> element.