Glassmorphismus-Generator

So verwendest du den Glassmorphismus-Generator

1. Tönung-Farbe wählen über die Farb-Eingabe; das wird die Basis-Glasfarbe hinter dem Blur.
2. Hintergrund-Deckkraft-Schieberegler ziehen (0-100 %), um zu wählen, wie viel die Szene dahinter durchscheint. 10-25 % ist der Sweet Spot.
3. Blur-Menge setzen (typischerweise 8-20 px). Zu wenig und der Effekt sieht wie ein schwacher Farbauftrag aus; zu viel und der Hintergrund wird unlesbar.
4. Rand-Deckkraft anpassen, um einen blassen 1-px-Rand zu zeichnen - das ist es, was die "Glasscheibe"-Illusion verkauft, indem es eine virtuelle Lichtkante einfängt.
5. Eckenradius wählen für abgerundete Ecken und die Vorschau gegen die eingebaute Gradientenszene prüfen.
6. Auf "CSS kopieren" klicken, um das vollständige Snippet einschließlich des -webkit-backdrop-filter-Fallbacks zu holen.

Wie Glassmorphismus tatsächlich gerendert wird

Der Effekt wird durch die CSS-backdrop-filter-Eigenschaft erzeugt, definiert in CSS Filter Effects Module Level 2. Im Gegensatz zu filter, das das Element selbst verwischt, weist backdrop-filter den Compositor an, die Pixel hinter dem Element zu sampeln, sie durch einen Gauß-Blur-Kernel in der GPU zu führen und das Ergebnis als Hintergrund des Elements zu malen, bevor die halbdurchsichtige Füllung darüber geschichtet wird. Der Kernel-Radius ist der Pixelwert, den du übergibst (z. B. blur(16px)), und moderne Engines (Chromiums cc::-Compositor, WebKits Core Animation Layers, Firefoxs WebRender) führen das als separaten Render-Durchgang aus. Das Tool gibt sowohl die Standard-Eigenschaft als auch die -webkit--präfixierte Version aus, weil Safari unter 18 immer noch auf das Präfix angewiesen ist, und lässt den will-change: backdrop-filter-Hinweis weg, weil das Erzwingen von Layer-Promotion auf Elementen, die bereits auf einer Compositor-Schicht leben, keinen Vorteil bringt und gelegentlich die Paint-Performance beeinträchtigt.

Wo Glassmorphismus seinen Wert zeigt

• Schwebende Navigationsleisten über Hero-Fotografie, damit die Navigation lesbar bleibt, während das Bild noch durchscheint.
• Modal-Dialoge und Command-Paletten, wo ein gefrosteter Hintergrund die beschäftigte Seite weichzeichnet, ohne den harten "grauen Vorhang" eines flachen Overlays.
• Widget-Karten auf Dashboard-Hintergründen mit Ambient-Verläufen - denke an Big-Sur- und Windows-11-Bedienfelder.
• Login-Bildschirme über Video-Schleifen, weil der Blur Bewegungsablenkung von den Formfeldern entfernt.
• Benachrichtigungs-Toasts über einem Live-App-Canvas, wo ein fester Hintergrund wichtigen Zustand verdecken würde.

Häufige Fallstricke und Zugänglichkeits-Bedenken

Der größte Fehlerfall ist Kontrast. WCAG 2.1 SC 1.4.3 erfordert, dass Text 4,5:1 gegen seinen effektiven Hintergrund erreicht, aber Glassmorphismus macht "effektiven Hintergrund" zu einem bewegenden Ziel: Die Farbe hinter der Scheibe ändert sich, wenn der Benutzer scrollt, und eine bestandene Kontrastprüfung auf einem hellen Hero-Abschnitt kann auf einem dunklen katastrophal versagen. Du solltest entweder die Tönung-Deckkraft hoch genug klemmen, dass Text immer gewinnt (oft über 60 %), einen subtilen inneren Verlauf hinzufügen, oder den Effekt auf dekorative Oberflächen beschränken. Die zweite Falle sind Compositing-Kosten: backdrop-filter erzwingt einen neuen Stacking-Kontext und einen vollständigen Regions-Readback bei jedem Frame, in dem es animiert wird, was die mobile Scroll-Performance zunichte machen kann, wenn es auf Elemente angewendet wird, die größer als ein paar Hundert Quadratpixel sind. Eine dritte Falle sind verschachtelte Scheiben - das Stapeln einer backdrop-filter innerhalb einer anderen kollabiert oft, weil die Blur-Quelle der inneren Scheibe die bereits verwischte äußere Scheibe ist, sodass die zweite Schicht nichts Sichtbares tut. Schließlich hat Firefox backdrop-filter erst ab Version 103 unmarkiert aktiviert; ältere ESR-Kanäle und der Tor-Browser rendern immer noch ein einfaches durchsichtiges Rechteck.

Der Spezifikations-Hintergrund: backdrop-filter vs. filter

Beide Eigenschaften werden unter der Filter-Effects-Familie ausgeliefert (W3C Filter Effects Module Level 1 für filter, Level 2 für backdrop-filter), aber sie zielen auf verschiedene Pixel-Quellen. filter ist Compositor-Eingabe: die eigene gerasterte Bitmap des Elements wird durch die Filter-Pipeline geführt. backdrop-filter ist Compositor-Backdrop: was auch immer bereits zum Ziel im Element-Rahmen gezeichnet wurde, wird gesampelt. Dieser Unterschied ist wichtig, weil nur letztere den "Kamera-Fokus"-Effekt erzeugen kann, der Glassmorphismus definiert - ein auf ein durchsichtiges div angewendeter filter: blur() würde nichts verwischen und eine feste Füllung würde sich selbst zu einem Schmierfleck verwischen. Beide Eigenschaften unterstützen verkettete Funktionslisten (blur(12px) saturate(180%) brightness(1.05)), und der Apple-Glaslook fügt normalerweise einen Sättigungs-Boost hinzu, um die Entsättigung zu kontern, die das Verwischen großer niedrig-frequenter Bereiche verursacht.

Wann du auf Glass verzichtest und zu etwas anderem greifst

Figmas eingebauter "Hintergrundunschärfe"-Effekt und Framers fx-Panel erzeugen dasselbe Visuelle, aber sie geben dir kein kopierbares CSS. Die Regeln von Hand zu schreiben ist günstig; die echte Alternative für verkehrsreiche Produktionsoberflächen ist oft ein vorgerendertes verwischtes Bild - günstiger pro Frame als ein Live-backdrop-filter und fürs Auge identisch, wenn sich der Inhalt dahinter nie bewegt. Für mobile-schwere Apps, wo jeder Scroll-Frame zählt, ist ein flaches durchsichtiges Material (iOS's systemMaterial, Material 3's "surface-container") normalerweise der richtige Anruf, auch wenn es die optische Tiefe fehlt. Und wenn dein Design-System bereits auf Neumorphismus angewiesen ist, die beiden zu mischen neigt dazu, als unentschieden zu lesen; wähle eine Material-Metapher pro Produkt.