Was ist Glassmorphism?

Eine Design-Strömung, populär gemacht von macOS Big Sur und Windows 11, bei der UI-Flächen wie Milchglas wirken: halbdurchlässiger Hintergrund, dahinterliegender Inhalt weichgezeichnet, ein dezenter Rand für die Lichtkante und ein weicher Schatten für Tiefe. Anders als Neumorphismus (täuscht 3D mit zwei gegenläufigen Schatten vor) und Skeuomorphismus (imitiert reale Materialien detailliert).

Warum sieht es in meinem Projekt nach nichts aus?

Glassmorphism braucht etwas dahinter zum Weichzeichnen. Auf einer schlichten weissen Seite sieht ein 95 % weisser Hintergrund mit Backdrop-Blur identisch aus zu einem 95 % weissen Hintergrund ohne Blur - es ist nichts zum Verwischen da. Ein farbiges Bild, ein Verlauf oder ein lebendiges Muster hinter die Karte legen; der Effekt erscheint sofort.

Was ist der Unterschied zu einem normalen halbtransparenten Hintergrund?

`background: rgba(255,255,255,0.5)` lässt den Backdrop unverändert durchscheinen - lesbar bei schlichtem Hintergrund, unlesbar bei vollem. `backdrop-filter: blur(20px)` plus halbtransparenter Hintergrund weichzeichnen den Backdrop *bevor* er durchscheint, sodass der Text obendrauf lesbar bleibt, egal wie chaotisch das Bild dahinter ist. Der Blur ist es, der Glassmorphism funktionieren lässt; Transparenz allein nicht.

Wird backdrop-filter überall unterstützt?

Moderne Chrome, Edge, Safari (mit `-webkit-`-Präfix in älteren Versionen) und Firefox 103+. Älterer Firefox fällt auf «kein Blur» zurück - der Hintergrund schimmert dann scharf durch, was meist als degradierte Erfahrung funktioniert. Für kritische UI einen deckenderen Fallback-Hintergrund hinzufügen (`background: rgba(255,255,255,0.9)`), damit das Design ohne Blur hält.

Warum ist es schlecht für die Performance?

`backdrop-filter: blur()` zwingt den Browser, einen Off-Screen-Buffer in Elementgrösse zu reservieren, die Pixel dahinter weichzuzeichnen und dann zu komponieren. Beim Scrollen passiert das pro Frame für jedes sichtbare Glass-Element. Ein, zwei Glass-Karten pro Seite sind okay; eine Liste mit 20 Glass-Elementen gleichzeitig drückt auf schwächeren Laptops die Framerate spürbar. Vor dem Release einer Glass-lastigen UI profilen.

Glassmorphism-Generator

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

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.

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.

So funktioniert's

Backdrop wählen
Zwischen Bild, Verlauf und vollem Muster in der Vorschau wechseln - der Glaseffekt ändert sich mit jedem.
Transparenz + Blur einstellen
Der Hintergrund-Alpha steuert, wie stark der Backdrop durchscheint; der Backdrop-Blur, wie weich. Beide spielen zusammen.
Rand + Schatten ergänzen
Ein 1-px transluzent-weisser Rand gibt dem Glas eine physische Kante. Ein weicher Schatten hebt es von der Fläche ab.
CSS kopieren
Alle vier Deklarationen (background, backdrop-filter, border, box-shadow) kommen in einem Block zum Einfügen.

Was ist das?

Glassmorphism ist die Milchglas-Ästhetik - transluzente Panels mit starkem Backdrop-Blur dahinter. Das CSS-Rezept ist klein: ein `background-color` mit Alpha < 1, `backdrop-filter: blur(...)`, ein dünner Rand (oft `rgba(255,255,255,0.18)`), grosszügiger `border-radius` und ein optionaler weicher `box-shadow` für Tiefe. Die Illusion funktioniert nur, wenn hinter dem Panel etwas Farbiges ist, auf das der Blur wirken kann - auf flachem Hintergrund kollabiert der Effekt zu einem schlichten transluzenten Rechteck.

Wann verwenden

Schwebende UI-Flächen über Hero-Bildern oder Videos, Navigationsleisten auf Foto-Hintergründen, Modal-Panels über einem unscharfen Backdrop der Seite, Karten auf Marketing-Seiten mit lebendigem Verlauf oder Foto und Tooltip-artige Overlays, bei denen ein Layer über der Seite suggeriert werden soll, statt sie zu ersetzen.

Häufige Fehler

Die Glass-Karte in Figma gegen einen flachen Hintergrund entwerfen und dann überrascht sein, dass sie in Produktion nach nichts aussieht - auf dem tatsächlich bunten Backdrop testen. Glass auf Glass stapeln (Blur-Qualität verschlechtert sich, Framerate bricht ein). Den Rand vergessen - ohne ihn sieht Glas wie ein Wisch aus; das dünne Highlight liest sich als «Kante echten Glases». Den Box-Shadow weglassen - Tiefe trennt Glas von Frischhaltefolie.

FAQ

Was ist Glassmorphism?: Eine Design-Strömung, populär gemacht von macOS Big Sur und Windows 11, bei der UI-Flächen wie Milchglas wirken: halbdurchlässiger Hintergrund, dahinterliegender Inhalt weichgezeichnet, ein dezenter Rand für die Lichtkante und ein weicher Schatten für Tiefe. Anders als Neumorphismus (täuscht 3D mit zwei gegenläufigen Schatten vor) und Skeuomorphismus (imitiert reale Materialien detailliert).
Warum sieht es in meinem Projekt nach nichts aus?: Glassmorphism braucht etwas dahinter zum Weichzeichnen. Auf einer schlichten weissen Seite sieht ein 95 % weisser Hintergrund mit Backdrop-Blur identisch aus zu einem 95 % weissen Hintergrund ohne Blur - es ist nichts zum Verwischen da. Ein farbiges Bild, ein Verlauf oder ein lebendiges Muster hinter die Karte legen; der Effekt erscheint sofort.
Was ist der Unterschied zu einem normalen halbtransparenten Hintergrund?: `background: rgba(255,255,255,0.5)` lässt den Backdrop unverändert durchscheinen - lesbar bei schlichtem Hintergrund, unlesbar bei vollem. `backdrop-filter: blur(20px)` plus halbtransparenter Hintergrund weichzeichnen den Backdrop *bevor* er durchscheint, sodass der Text obendrauf lesbar bleibt, egal wie chaotisch das Bild dahinter ist. Der Blur ist es, der Glassmorphism funktionieren lässt; Transparenz allein nicht.
Wird backdrop-filter überall unterstützt?: Moderne Chrome, Edge, Safari (mit `-webkit-`-Präfix in älteren Versionen) und Firefox 103+. Älterer Firefox fällt auf «kein Blur» zurück - der Hintergrund schimmert dann scharf durch, was meist als degradierte Erfahrung funktioniert. Für kritische UI einen deckenderen Fallback-Hintergrund hinzufügen (`background: rgba(255,255,255,0.9)`), damit das Design ohne Blur hält.
Warum ist es schlecht für die Performance?: `backdrop-filter: blur()` zwingt den Browser, einen Off-Screen-Buffer in Elementgrösse zu reservieren, die Pixel dahinter weichzuzeichnen und dann zu komponieren. Beim Scrollen passiert das pro Frame für jedes sichtbare Glass-Element. Ein, zwei Glass-Karten pro Seite sind okay; eine Liste mit 20 Glass-Elementen gleichzeitig drückt auf schwächeren Laptops die Framerate spürbar. Vor dem Release einer Glass-lastigen UI profilen.