Glassmorphism Card — Free HTML CSS backdrop-filter Snippet

Glassmorphism is a design trend that simulates frosted or etched glass — a card that appears translucent, blurring and tinting the colourful content visible through it. The style became mainstream around 2020 with Apple's macOS Big Sur and has since spread across fintech apps, crypto dashboards, SaaS landing pages, and design tools — see the glassmorphism login for a form example, or the neumorphism and claymorphism card trends. It communicates a premium, modern aesthetic with minimal code.

This snippet gives you a complete glassmorphism card in plain HTML and CSS — no JavaScript required. The card sits over a purple-to-violet gradient scene with two decorative colour blobs, demonstrating exactly how the effect looks in production.

Why four CSS properties are required

Glassmorphism is not a single CSS property — it needs four working together.

First: backdrop-filter: blur(16px) blurs everything rendered directly behind the element in the browser's compositor. This is the defining property. Without it, the card is just a transparent box with no visual depth.

Second: background: rgba(255,255,255,0.15) gives the card a 15% white fill. This is the balance point — if the background is fully opaque, the blur is invisible because no content shows through. If it is 0%, the card disappears entirely. Values between 10% and 25% produce the best glass effect over most backgrounds.

Third: border: 1px solid rgba(255,255,255,0.3) adds a subtle semi-transparent white border. This simulates the way light catches the edge of real glass — a thin bright line around the perimeter that gives the card physical presence.

Fourth: border-radius: 20px rounds the corners, which is stylistically expected in glassmorphism designs and softens the contrast between the card and its background.

Why the background scene matters

backdrop-filter blurs what is rendered directly behind the element. If the background is a solid colour, blurring it produces that same solid colour — no visible effect. Glassmorphism only works over content with visual variety: gradients, photographs, particle effects, or animated orbs. This snippet provides a gradient scene with two colour blobs via ::before and ::after pseudo-elements on .scene to demonstrate the full effect. When using in your project, place the card over a hero image, gradient section, or background animation.

Safari and the -webkit- prefix

backdrop-filter requires the -webkit-backdrop-filter prefix in older Safari versions. This snippet includes both declarations: backdrop-filter: blur(16px); and -webkit-backdrop-filter: blur(16px); — always include both for maximum compatibility.

Creating a dark glassmorphism variant

To create a dark glass effect (common in dark-themed dashboards), change background: rgba(255,255,255,0.15) to background: rgba(0,0,0,0.25) and border: 1px solid rgba(255,255,255,0.3) to rgba(255,255,255,0.1). Adjust text colour to white. The blur remains the same — only the tint changes.

Using glassmorphism on a navigation bar

Apply the same properties to a position: fixed nav element. As users scroll, the page content blurs beneath the header, creating a live frosted glass effect. The hamburger nav snippet in this library already uses this technique.

Adjusting blur strength and opacity

For a subtle effect use blur(8px) with rgba(255,255,255,0.1). For a heavy frosted look use blur(24px) with rgba(255,255,255,0.2). High blur values can impact performance on mobile — test at the 375px preview before shipping.

Saving your customised version

After editing, click "Save as" in the editor header, type a name, and press Enter. Saves to IndexedDB and appears in the Saved tab.