CSS-Glasmorphismus-Generator
Gestalten Sie einen Glaseffekt (Glasmorphismus) mit Live-Vorschau — passen Sie Unschärfe, Transparenz, Farbton und Rahmen an und kopieren Sie das CSS.
665 Aufrufe
Was ist Glasmorphismus?
Glasmorphismus ist der Milchglas-Look: ein halbtransparentes Panel, das mit backdrop-filter: blur() alles dahinter unscharf macht, kombiniert mit einem dezenten Rahmen und Schatten. Er wirkt am besten über bunten Hintergründen oder Bildern — auf einem einfarbigen Hintergrund ist die Unschärfe unsichtbar.
Bewegen Sie die Regler und beobachten Sie die Live-Vorschau; das CSS darunter aktualisiert sich sofort und ist kopierbereit. Denken Sie an das -webkit-backdrop-filter-Präfix für Safari, das der generierte Code bereits enthält.
Häufig gestellte Fragen
Warum wirkt mein Glaseffekt flach?
backdrop-filter zeigt sich nur über einem unregelmäßigen Hintergrund — platzieren Sie das Element über einem Verlauf oder Bild. Prüfen Sie auch die Browserunterstützung: Safari benötigt das -webkit--Präfix (im generierten Code enthalten).
Beeinträchtigt backdrop-filter die Leistung?
Unschärfe wird GPU-beschleunigt, ist aber nicht kostenlos. Verwenden Sie sie auf wenigen zentralen Flächen (Karten, Header) statt auf Dutzenden Elementen, und halten Sie den Unschärferadius auf Mobilgeräten moderat.
Welche Werte ergeben den klassischen Glaslook?
Ein guter Ausgangspunkt: weißer Hintergrund bei 15-25 % Deckkraft, 8-12px Unschärfe, 1px Rahmen mit 30 % Weiß und 16px Radius — die Standardwerte dieses Generators.
Ähnliche Tools
Problem melden
CSS-Glasmorphismus-Generator