Glassmorphism-Generator
Gestalten Sie Milchglas-Panels: Blur, Transparenz, Lichtränder und weiche Schatten — mit lebendigen Farbszenen hinter dem Glas.
Hinweis: backdrop-filter benötigt für Safari das -webkit--Präfix — es ist in der Ausgabe enthalten.
So verwenden Sie den Glassmorphism-Generator
- Wählen Sie eine Tönung und stellen Sie die Panel-Transparenz ein — niedrigere Werte wirken „gläserner“.
- Erhöhen Sie den Blur, um den Hintergrund matt wirken zu lassen; fügen Sie Sättigung hinzu, damit Farben hinter dem Glas leuchten.
- Fügen Sie einen subtilen hellen Rahmen (halbtransparentes Weiß) hinzu, um den Glasrand-Glanz zu simulieren.
- Justieren Sie den weichen Schlagschatten und den Eckenradius, um den Schwebeeffekt zu vollenden.
- Wechseln Sie die Hintergrundszene, um die Lesbarkeit zu testen, und kopieren Sie dann den CSS- oder Tailwind-Code.
Über diesen Glassmorphism-Generator
Glassmorphism ist ein UI-Stil, bei dem Panels wie Milchglas aussehen: ein halbtransparenter Hintergrund, ein Hintergrund-Blur, ein subtiler heller Rahmen und ein weicher Schatten. Er wurde zum Mainstream-Designtrend für Cards, Navbars und Modals. Die magische Zutat ist die Eigenschaft backdrop-filter, die Effekte auf das anwendet, was hinter dem Element liegt.
Dieser Generator lässt Sie jede Zutat einstellen — Tönung, Transparenz, Blur, Sättigung, Rahmenlicht, Radius und Schatten — über drei farbenfrohen Testszenen, damit Sie den Effekt realistisch beurteilen können. Die Ausgabe enthält das -webkit-backdrop-filter-Präfix für Safari. Prüfen Sie aus Gründen der Barrierefreiheit immer, dass Text auf Glas über geschäftigen Hintergründen genug Kontrast behält.
Glassmorphism FAQ
Welche Browser unterstützen backdrop-filter?
backdrop-filter wird von allen modernen Browsern unterstützt. Chrome und Edge unterstützen es ohne Präfix; Safari benötigt das -webkit--Präfix, das der Generator automatisch einfügt. Auf sehr alten Browsern fällt das Panel einfach auf seinen halbtransparenten Hintergrund zurück, was immer noch akzeptabel aussieht.
Warum wird mein Glaseffekt nicht angezeigt?
backdrop-filter funktioniert nur, wenn sich etwas hinter dem Element befindet — ein Hintergrundbild, ein Verlauf oder anderer Inhalt. Sitzt das Element auf einem flachen, einfarbigen Hintergrund, gibt es nichts zu verwischen. Stellen Sie außerdem sicher, dass der Panel-Hintergrund Transparenz hat (Alpha unter 100 %), sonst wird der Hintergrund vollständig verdeckt.
Wofür ist die Funktion saturate()?
saturate() verstärkt (über 100 %) oder dämpft (unter 100 %) die Farben des Hintergrunds vor dem Weichzeichnen. Werte um 130–180 % machen Farben hinter dem Glas lebendig und helfen dem Milchglaseffekt, sich klar abzuheben — ein charakteristischer Teil des Glassmorphism-Looks.
Ist Glassmorphism schlecht für die Barrierefreiheit?
Es kann sein, wenn Text auf stark verwischten, kontrastarmen Hintergründen liegt. Halten Sie die Transparenz moderat, nutzen Sie das Rahmenlicht zur Kantendefinition und testen Sie Ihr Panel über dem geschäftigsten Hintergrund, den es überdecken wird. Die drei eingebauten Szenen helfen Ihnen, den Kontrast vor dem Launch zu prüfen.
Kann ich Glassmorphism mit Tailwind kombinieren?
Ja. Der Tailwind-Tab gibt Arbitrary-Value-Klassen aus (bg-[rgba(...)], backdrop-blur-[12px] usw.), die mit Tailwind CSS v3+ ohne Konfiguration funktionieren.