CSS Glassmorphism Generator
Einstellungen
Vorschau
Glassmorphism
Frosted glass effect using CSS backdrop-filter
CSS-Ausgabe
So nutzen Sie das Tool
- Hintergrund — Farbe wählen und Deckkraft für den Glas-Effekt einstellen.
- Unschärfe regeln — Höhere Werte erzeugen stärkeren Milchglas-Effekt.
- Sättigung — Farben hinter dem Glas verstärken.
- Rahmen — Halbtransparenter Rahmen definiert die Glaskante.
- Kopieren — "CSS kopieren" für die komplette Regel.
Was ist Glassmorphism?
Glassmorphism ist ein UI-Designtrend, der Milchglas-Effekte mit CSS backdrop-filter erzeugt. Elemente erscheinen durchscheinend und verwischen den Inhalt dahinter.
Kernmerkmale: halbtransparenter background, backdrop-filter: blur(), dezenter border und weicher box-shadow.
Typische Einsatzszenarien
Tipps & Best Practices
Glassmorphism wirkt am besten über farbigen oder Bild-Hintergründen. Auf reinem Weiß kaum sichtbar.
10–30% Hintergrund-Deckkraft erzeugt den besten Glas-Effekt.
Immer -webkit-backdrop-filter neben backdrop-filter für Safari-Unterstützung angeben.
Ohne Blur-Unterstützung sieht der halbtransparente Hintergrund immer noch ordentlich aus.
Häufig gestellte Fragen
Funktioniert backdrop-filter überall?
Ja. Chrome, Edge, Safari und Firefox unterstützen es. Safari braucht den -webkit- Prefix.
Ist Glassmorphism schlecht für Performance?
GPU-beschleunigt, aber große Blur-Werte auf vielen überlappenden Elementen können teuer werden. Auf Mobilgeräten sparsam einsetzen.
Kann man den Blur animieren?
Ja. backdrop-filter ist animierbar. Übergang von blur(0) zu blur(12px) für Reveal-Effekte.
Unterschied filter vs backdrop-filter?
filter wirkt auf das Element selbst. backdrop-filter wirkt auf den Bereich dahinter.