What is glassmorphism?

A design trend popularised by macOS Big Sur and Windows 11 where UI surfaces look like frosted glass: a semi-transparent background, the content behind them blurred, a subtle border to catch the light, and a soft shadow for depth. Different from neumorphism (which fakes 3D with two opposing shadows) and from skeuomorphism (which mimics real-world materials in detail).

Why does it look like nothing in my project?

Glassmorphism needs something behind it to blur. On a plain white page, a 95% white background with backdrop-blur looks identical to a 95% white background without backdrop-blur - there's nothing to blur. Drop a colourful image, gradient or busy pattern behind the card; the effect appears instantly.

How is this different from a regular semi-transparent background?

`background: rgba(255,255,255,0.5)` lets the backdrop show through unchanged - readable if the backdrop is plain, illegible if the backdrop is busy. `backdrop-filter: blur(20px)` plus a translucent background blurs the backdrop *before* it shows through, so the text on top stays legible no matter how chaotic the image behind. The blur is what makes glassmorphism work; the transparency alone doesn't.

Is backdrop-filter supported everywhere?

Modern Chrome, Edge, Safari (with `-webkit-` prefix for older versions) and Firefox 103+. Older Firefox falls back to no blur - the background still shows through, just sharply, which usually works as a degraded experience. For critical UI, add a more opaque background fallback (`background: rgba(255,255,255,0.9)`) so the design holds without the blur.

Why is it bad for performance?

`backdrop-filter: blur()` forces the browser to allocate an offscreen buffer matching the element's size, blur the pixels behind it, then composite. On scroll, this happens every frame for every glass element in view. One or two glass cards per page is fine; a list of 20 glassy items at once will drop frame rate noticeably on lower-end laptops. Profile before shipping a glass-heavy interface.

Glassmorphism Generator

Frosted-glass CSS with live preview - tune background colour, backdrop blur, border and shadow over a busy backdrop.

Runs in your browser

Glassmorphism = translucent background + heavy backdrop blur + thin border + soft shadow. The preview puts your generated card over a busy colourful backdrop so the blur is visible (the effect is invisible against a flat-colour background - it needs something behind it to blur). All four ingredients have sliders; the preview updates live and the CSS block is ready to copy.

Backdrop

Background colour

Background alpha20%

Border colour

Border alpha35%

Backdrop blur16px

Border radius16px

Shadow blur32px

CSS

background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25);

Preview

Frosted glass

Translucent panels with a heavy backdrop blur and a subtle border.

How to use it

Pick a backdrop
Switch between an image, a gradient and a busy pattern in the preview - the glass effect changes meaning with each.
Tune transparency + blur
Background alpha controls how much the backdrop shows through; backdrop blur controls how much it's softened. Both work together.
Add the border + shadow
A 1 px white-ish translucent border gives the glass a physical edge. A soft shadow lifts it off the surface.
Copy the CSS
All four declarations (background, backdrop-filter, border, box-shadow) come in one block, ready to paste.

What is it?

Glassmorphism is the frosted-glass UI aesthetic - translucent panels backed by a strong backdrop blur. The CSS recipe is small: a `background-color` with alpha < 1, `backdrop-filter: blur(...)`, a thin border (often `rgba(255,255,255,0.18)`), generous `border-radius`, and an optional soft `box-shadow` for depth. The illusion only works when there's something colourful behind the panel for the blur to act on - on flat backgrounds the effect collapses to a simple translucent rectangle.

When to use it

Floating UI surfaces over hero images or videos, nav bars sitting on top of photo backgrounds, modal panels over a blurred backdrop of the page below, cards in marketing pages where the background is a vibrant gradient or photo, and tooltip-like overlays where you want to suggest content layered above the page rather than replacing it.

Common mistakes

Designing the glass card against a flat background in Figma, then being surprised when it looks like nothing in production - test on the actual colourful backdrop. Stacking glass-on-glass (the blur quality degrades and frame rate tanks). Forgetting the border - without it, glass looks like a smudge; the thin highlight is what reads as 'edge of physical glass'. Skipping the box-shadow - depth is what separates glass from cellophane.

FAQ

What is glassmorphism?: A design trend popularised by macOS Big Sur and Windows 11 where UI surfaces look like frosted glass: a semi-transparent background, the content behind them blurred, a subtle border to catch the light, and a soft shadow for depth. Different from neumorphism (which fakes 3D with two opposing shadows) and from skeuomorphism (which mimics real-world materials in detail).
Why does it look like nothing in my project?: Glassmorphism needs something behind it to blur. On a plain white page, a 95% white background with backdrop-blur looks identical to a 95% white background without backdrop-blur - there's nothing to blur. Drop a colourful image, gradient or busy pattern behind the card; the effect appears instantly.
How is this different from a regular semi-transparent background?: `background: rgba(255,255,255,0.5)` lets the backdrop show through unchanged - readable if the backdrop is plain, illegible if the backdrop is busy. `backdrop-filter: blur(20px)` plus a translucent background blurs the backdrop *before* it shows through, so the text on top stays legible no matter how chaotic the image behind. The blur is what makes glassmorphism work; the transparency alone doesn't.
Is backdrop-filter supported everywhere?: Modern Chrome, Edge, Safari (with `-webkit-` prefix for older versions) and Firefox 103+. Older Firefox falls back to no blur - the background still shows through, just sharply, which usually works as a degraded experience. For critical UI, add a more opaque background fallback (`background: rgba(255,255,255,0.9)`) so the design holds without the blur.
Why is it bad for performance?: `backdrop-filter: blur()` forces the browser to allocate an offscreen buffer matching the element's size, blur the pixels behind it, then composite. On scroll, this happens every frame for every glass element in view. One or two glass cards per page is fine; a list of 20 glassy items at once will drop frame rate noticeably on lower-end laptops. Profile before shipping a glass-heavy interface.