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

Milchglas in CSS mit Live-Vorschau - Hintergrundfarbe, Backdrop-Blur, Rand und Schatten über lebendigem Backdrop justieren.

Läuft in deinem Browser

Glassmorphism = transluzenter Hintergrund + starker Backdrop-Blur + dünner Rand + weicher Schatten. Die Vorschau setzt deine Karte über einen bunten Backdrop, damit der Blur sichtbar wird (auf flachem Hintergrund verschwindet der Effekt - er braucht etwas dahinter). Alle vier Zutaten haben Slider; die Vorschau aktualisiert sich live, der CSS-Block ist kopierbereit.

Hintergrund

Hintergrundfarbe

Hintergrund-Deckkraft20%

Rahmenfarbe

Rahmen-Deckkraft35%

Backdrop-Blur16px

Border-Radius16px

Schatten-Weichzeichnen32px

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);

Vorschau

Milchglas

Transluzente Panels mit starkem Backdrop-Blur und subtilem Rand.

So funktioniert's

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.

Was ist das?

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.

Wann verwenden

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.

Häufige Fehler

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.