Glassmorphism CSS: Glaseffekt-UI erstellen
Implementiere Glassmorphism mit backdrop-filter, rgba-Transparenz und Border-Tricks. Inklusive Browser-Unterstuetzung und Barrierefreiheit.
Glassmorphism wurde einer der praegensten UI-Trends der fruehen 2020er. Der Milchglas-Effekt schafft ein Gefuehl von Tiefe und Transluzenz.
Die CSS-Implementierung benoetigt drei Zutaten: backdrop-filter fuer das Blur, rgba fuer Transparenz und einen halbtransparenten Rahmen.
Was ist Glassmorphism
Glassmorphism ist ein Designstil mit transluzenten Oberflaechen und einem Milchglas-Effekt. Visuelle Eigenschaften: Hintergrundtransparenz (30-50% Opazitaet), Hintergrundunschaerfe (8-32px), subtiler Rahmen (1-2px, halbtransparent weiss).
Kostenloses Tool Glassmorphism Generator Erstelle mattglas UI-Effekte mit Live-CSS-Vorschaubackdrop-filter: blur() Syntax
backdrop-filter wendet grafische Effekte auf den Inhalt hinter einem Element an. Die blur()-Funktion unschaerft den Hintergrund: backdrop-filter: blur(12px).
rgba und Transparenz
Die Glasoberflaeche verwendet rgba() mit niedrigem Alpha-Wert: background: rgba(255, 255, 255, 0.15). Der Alpha-Wert (0.15-0.25) steuert die Transparenz der Oberflaeche.
Kostenloses Tool CSS Filter Generator Wende Unschärfe, Helligkeit und Kontrast mit CSS-Filtern anBorder mit rgba
Ein kennzeichnendes Merkmal von Glassmorphism ist der halbtransparente Rahmen: border: 1px solid rgba(255, 255, 255, 0.3). Fuer dunkle Themen: rgba(255, 255, 255, 0.1).
Browser-Unterstuetzung und Fallbacks
backdrop-filter wird seit 2022 in allen modernen Browsern unterstuetzt. Verwende @supports (backdrop-filter: blur(1px)) um Glassmorphism nur dort anzuwenden, wo es unterstuetzt wird.
Leistungsueberlegungen
backdrop-filter ist rechenintensiv und kann die Leistung auf komplexen Seiten oder Mobilgeraeten beeintraechtigen. Begrenze die Anzahl der Elemente mit backdrop-filter.
Kostenloses Tool Neumorphism Generator Erstelle weiche UI-Extrusionseffekte mit doppelten Box-Shadows