Glassmorphism-Generator

Glassmorphismus ist ein UI-Stil, der ein Element wie mattiertes Glas aussehen lässt — ein halb-transparentes Panel, das alles dahinter unscharf macht, abgerundet mit einem dünnen hellen Rahmen und einem weichen Schatten für Tiefe. Dieser Stil ist in macOS Big Sur, Windows 11 Acrylic-Oberflächen und modernen Login-Karten zu sehen. Die drei Zutaten sind ein transluzenter Hintergrundfüllwert, ein Backdrop Blur und ein dezenter 1px-Rahmen, z. B.: background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).

Das Element erhält einen halb-transparenten Hintergrund und einen Backdrop Blur, dann wird ein hauchdünner Rahmen hinzugefügt. Ein solider Ausgangspunkt ist: background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). Entscheidend ist, dass der Hintergrundfüllwert teilweise transparent ist, damit der Blur dahinter sichtbar wird. Die Regler oben ziehen, um feinzujustieren, und das exakte CSS kopieren.

backdrop-filter wendet einen grafischen Effekt — am häufigsten blur() — auf den Bereich hinter einem Element an, nicht auf den eigenen Inhalt des Elements. backdrop-filter: blur(10px) macht also alles unscharf, was hinter dem Element gerendert wird, was den Mattglas-Look erzeugt. Filter können auch verkettet werden, z. B. backdrop-filter: blur(10px) saturate(150%), um hinter dem Glas gleichzeitig Unschärfe und Farbverstärkung zu erzeugen. Es zeigt nur dann eine Wirkung, wenn der eigene Hintergrund des Elements zumindest teilweise transparent ist.

Frosted Glass ist Glassmorphismus mit einem stärkeren Blur und einem etwas undurchsichtigeren Tint. Empfehlenswert ist: background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. Den Blur auf 14–20 px und die Tint-Deckkraft auf etwa 20–30 % erhöhen, damit die Oberfläche als „mattiert" statt als klar wahrgenommen wird. Das Frosted-Card-Preset in UtiloKit setzt diese Werte sofort, sodass von dort aus direkt angepasst werden kann.

Ja — backdrop-filter wird von allen aktuellen Hauptbrowsern unterstützt (Chrome, Edge, Firefox und Safari). Safari unterstützt es seit Jahren hinter dem -webkit-backdrop-filter-Präfix, daher sollten stets beide Zeilen eingebunden werden: -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). Der Glassmorphismus Generator von UtiloKit gibt die Präfix-Version automatisch aus. Sehr alte Browser, die es nicht unterstützen, zeigen einfach den einfachen halb-transparenten Hintergrund, was sich sauber degradiert.

Die drei häufigsten Ursachen: (1) Es befindet sich nichts hinter dem Element zum Unschärfen — backdrop-filter wirkt nur auf Inhalte, die dahinter gerendert werden, also das Element über einem Bild oder Farbverlauf platzieren; (2) der eigene Hintergrund des Elements ist vollständig undurchsichtig — einen rgba()-Füllwert wie rgba(255,255,255,0.18) verwenden, damit der Blur sichtbar wird; (3) das -webkit-backdrop-filter-Präfix für Safari wurde vergessen. Zu beachten ist außerdem, dass ein Vorfahren-Element mit filter, transform oder will-change einen Containing Block erzeugen kann, der den Effekt vollständig unterbricht.

Backdrop-Blur-Utilities mit einem transluzenten Hintergrund und einem dezenten Rahmen kombinieren. Beispiel: class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". backdrop-saturate-150 verwenden, um die Farbe dahinter zu verstärken. Für exakte Werte oben in den Tailwind-Tab wechseln — er gibt Arbitrary-Value-Klassen wie backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px] aus, die exakt den Reglern entsprechen.

Glassmorphismus nutzt Transparenz und einen Hintergrund-Blur, damit das Element wie mattiertes Glas wirkt, das über dem Inhalt schwebt. Neumorphismus (Soft UI) ist das Gegenteil: opake Elemente in der gleichen Farbe wie die Seite, denen durch kombinierte helle und dunkle Schatten ein 3D-extrudierter Look verliehen wird — zum Beispiel box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. Glassmorphismus braucht einen farbenfrohen Hintergrund, um zu strahlen; Neumorphismus braucht einen flachen, einfarbigen Hintergrund.

Für die meisten Karten wirkt ein Backdrop Blur von 8–16 px gut. Etwa 5–8 px für ein leichtes, kaum mattiertes Glas, 10–16 px für eine typische Karte oder ein Modal, und 16–25 px für eine starke Frosted-Glass-Navbar oder ein Overlay. Mehr Blur mit einer leicht höheren Tint-Deckkraft kombinieren, damit der Text lesbar bleibt. Der Blur-Regler geht von 0 bis 40 px, sodass der optimale Wert für das jeweilige Hintergrundbild gefunden werden kann.

Lesbarkeit entsteht durch den Kontrast zwischen dem Text und dem unscharfen Hintergrund. Die Tint-Deckkraft auf etwa 25–40 % erhöhen, damit die Oberfläche weniger durchsichtig ist, backdrop-saturate hinzufügen, um unruhige Farben dahinter zu dämpfen, und eine Textfarbe mit starkem Kontrast wählen — weißer Text auf dunklem Tint-Glas oder dunkler Text auf hellem Tint. Das WCAG-4.5:1-Kontrastverhältnis für Fließtext anstreben und kleinen Text nicht über dem buntesten Teil des Hintergrundbilds platzieren.

Das ist möglich, erfordert aber Sorgfalt. Transparenz macht den Kontrast unberechenbar, weil sich die Farbe hinter dem Glas ständig ändert, was Text unter das WCAG-4.5:1-Minimum fallen lassen kann. Eine ausreichend hohe Tint-Deckkraft (30 %+) verwenden, den Text gegen den unruhigsten Teil des Hintergrunds testen und nicht allein auf den Blur setzen, um Inhalte zu trennen. Außerdem sollten Nutzer, die prefers-reduced-transparency aktiviert haben, über einen stärker opaken Fallback im CSS bedacht werden.

Glassmorphism.com (von Michal Malewicz) bietet einen schnellen Einstieg für einen Stil, erlaubt jedoch kein Hochladen eines eigenen Hintergrundbilds, keine Sättigungsregelung und keinen Tailwind-Klassen-Export. Glass UI (glass-ui.com) ist ähnlich eingeschränkt — eine einzige Hintergrundvorschau, keine Tailwind-Ausgabe, kein teilbarer Link. UtiloKit ermöglicht das Einfügen eines eigenen Bilds, die Feinabstimmung jedes Parameters einschließlich Sättigung und Schattenintensität, sowohl CSS- als auch Tailwind-Ausgabe und das Teilen der exakten Konfiguration über eine URL. Alles läuft im Browser ohne Upload auf einen Server.

Einen Container über einem Hintergrundbild oder Farbverlauf platzieren und das generierte CSS auf die Karte anwenden. Minimales Beispiel: dem übergeordneten Element einen Hintergrund geben und das untergeordnete Element mit background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px versehen. Das fertige HTML-Snippet aus der Ausgabe oben kopieren — es enthält das Markup und einen Style-Block, der direkt in die Seite eingefügt werden kann, ohne zusätzliche Einrichtung.

Ja. Der Glassmorphismus Generator von UtiloKit ist vollständig mobilresponsiv und funktioniert in Safari auf iPhone, Chrome auf Android und jedem modernen mobilen Browser. Die Regler sind touch-freundlich, die Live-Vorschau aktualisiert sich in Echtzeit, und das Kopieren der CSS- oder Tailwind-Ausgabe funktioniert über die Zwischenablage des Telefons genauso wie auf dem Desktop. Da alles im Browser läuft ohne Serverbeteiligung, ist nichts zu installieren — einfach die Seite öffnen und loslegen.

Ja — auf die Schaltfläche „Link kopieren" klicken und alle Reglerwerte werden direkt in die URL kodiert. Diesen Link einem Designer oder Entwickler schicken, und er öffnet die exakte Konfiguration: gleicher Blur, gleiche Tint-Farbe und -Deckkraft, gleiche Sättigung, gleiche Rahmen- und Schatteneinstellungen. Kein Account erforderlich, keine Datei zu exportieren. Dies ist ein Bereich, in dem glassmorphism.com und Glass UI schwächeln — keines der beiden unterstützt teilbare Konfigurationslinks.