Glassmorphism Snippets — Free HTML CSS JS Frosted-Glass UI Examples

Glassmorphism is a translucent surface blurring whatever sits behind it — the effect Apple and Microsoft made a system-level convention. In CSS it is backdrop-filter: blur() over a semi-transparent background, and the whole craft lies in the supporting details: a subtle light border, a soft shadow, and a background with enough variation for the blur to be visible at all.

These snippets cover cards, navigation bars, modals, sidebars and overlays, each tuned so the surface reads as glass rather than as a grey rectangle.

backdrop-filter, and why it needs something to blur

backdrop-filter samples whatever is rendered behind an element and applies the filter to that sampled content — it has nothing to do with the element's own background image. That means the effect is invisible against a flat, uniform background: it needs a gradient, a photo, or textured content behind it for the blur to actually read as glass rather than as a plain translucent panel.

The supporting details that sell the illusion

A blurred background alone looks unfinished. A one-pixel border in a light, semi-transparent white gives the pane an edge to catch the eye the way real glass catches light; a soft, diffuse shadow gives it the sense of sitting above the surface rather than being painted onto it; a slight saturation boost in the filter keeps colours behind the glass from washing out. These three details, more than the blur radius itself, are what separate a convincing glass card from a grey rectangle.

Cost, and where to spend it

backdrop-filter is one of the more expensive properties in CSS to render, because the compositor has to resample the backdrop on every frame the element is visible or animating. A handful of static glass surfaces per screen is unremarkable; a scrolling list of them, or one animating continuously, is where mid-range devices start dropping frames — worth testing on real hardware rather than a development machine before shipping broadly.

Contrast has to be checked against the real backdrop

Text inside a glass panel needs to stay legible against whatever happens to be behind it, not against a curated demo background — and a translucent surface's actual contrast varies as the content behind it scrolls or changes. Raising the panel's background opacity slightly and adding saturation to the filter is usually enough to restore contrast without losing the glass effect, and it is worth verifying against the lightest realistic backdrop the panel could sit over.