Motion & texture

Glassmorphism / Backdrop Blur

Q: How do I implement a Glassmorphism / Backdrop Blur?

Give the sticky header a frosted-glass look: backdrop-filter: blur(12px) plus a semi-transparent tint (rgba(255,255,255,0.72)) so text stays readable, optional 1px light border, and a solid fallback when backdrop-filter is unsupported.

Blur what’s behind a surface and tint it so the layer reads as translucent glass.

Also known as frosted glass · backdrop blur · acrylic

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Glassmorphism / Backdrop Blur".

Give the sticky header a frosted-glass look: backdrop-filter: blur(12px) plus a semi-transparent tint (rgba(255,255,255,0.72)) so text stays readable, optional 1px light border, and a solid fallback when backdrop-filter is unsupported.

Anatomy:
- backdrop-filter: Blurs what is behind the element—not the element itself.
- tint: A semi-transparent fill is required; pure blur is not “glass.”
- border highlight: 1px translucent light edge sells thickness.

Preferred API / pattern: `backdrop-blur utilities + bg-white/70`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Using filter
○Avoid: Blur without a tint
○Avoid: Heavy blur on a scrolling list without will-change/compositor care
○Avoid: No fallback when backdrop-filter is missing

In plain wordsHow people search for it

“that frosted nav bar where you can still see the page blur underneath”“iOS Control Center kind of frosted glass”“background is blurred but you can still sort of tell what’s behind it”

AnatomyOpen for part names

backdrop-filter: Blurs what is behind the element—not the element itself.
tint: A semi-transparent fill is required; pure blur is not “glass.”
border highlight: 1px translucent light edge sells thickness.

How to write itOpen for stack patterns

Web (HTML/CSS)backdrop-filter: blur(12px) + translucent fill

React + Tailwind + shadcn/uibackdrop-blur utilities + bg-white/70

SwiftUI.ultraThinMaterial / .bar materials

Ant Designcustom CSS on headers; no dedicated glass component

Notes

Easy mix-up: filter: blur() blurs the element; backdrop-filter blurs what’s behind it—frosted glass needs the latter. Blur alone is not enough; stack a tint (e.g. rgba(255,255,255,0.72)) so text contrast stays controllable. Materials on iOS/SwiftUI are the system-native version of the same idea.

Common mistakesHumans and models trip here

Using filter: blur() instead of backdrop-filter: the control itself goes mushy and text dies.
Blur without a tint: text sits on busy imagery with uncontrolled contrast.
Heavy blur on a scrolling list without will-change/compositor care: jank on low-end devices.
No fallback when backdrop-filter is missing: unreadable transparent header.

More failure symptoms on AI broke it.

Related patterns

Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.CardA contained surface grouping related content and actions as one unit.Drawer / Side SheetA panel that slides in from an edge, usually over a scrim, for secondary tasks.Safe Area InsetsThe inset region free of notches, rounded corners, and the home indicator.

Spotted a wrong name or missing pattern?

Message on X