Glassmorphismus ist ein UI-Designtrend, der eine Milchglastextur erzeugt, indem der Hintergrund halbtransparent gemacht und ein Unschärfe-Effekt angewendet wird (backdrop-filter: blur()). Er wird in Apples macOS/iOS und im Windows Fluent Design System häufig verwendet.

Mit diesem Tool können Sie 12 Arten von Voreinstellungen mit einem Klick anwenden und die 4 backdrop-filter-Funktionen einzeln anpassen: blur, brightness, saturate und contrast. Sie können auch Ränder, Schatten und abgerundete Ecken mit Schiebereglern feinabstimmen und den Code im CSS- oder CSS-Variablen-Format kopieren.

backdrop-filter: blur()

Verwischt den Bereich hinter dem Element. Je größer der Wert, desto stärker der Milchglaseffekt. Dies ist die Kerneigenschaft des Glassmorphismus.

backdrop-filter: brightness()

Passt die Helligkeit des Hintergrunds an. 100% ist der Standardwert. 200% machen ihn doppelt so hell und 0% machen ihn pechschwarz.

backdrop-filter: saturate()

Passt die Sättigung des Hintergrunds an. 100% ist der Standardwert. 0% machen ihn einfarbig und 200% machen ihn zu einer übersättigten, lebendigen Farbe.

backdrop-filter: contrast()

Passt den Kontrast des Hintergrunds an. 100% ist der Standardwert. Die Erhöhung des Wertes betont den Unterschied zwischen Hell und Dunkel.

Herstellerpräfix (Vendor Prefix)

Es wird empfohlen, -webkit-backdrop-filter für die Safari-Unterstützung aufzunehmen. Es ist automatisch im Ausgabecode dieses Tools enthalten.

Q. Wird backdrop-filter in allen Browsern unterstützt?

A. Es wird in den neuesten Versionen der gängigsten Browser wie Chrome, Edge, Safari und Firefox unterstützt. IE11 wird nicht unterstützt, es wird jedoch ein Fallback-Design empfohlen, das nur eine halbtransparente Hintergrundfarbe verwendet.

Q. Was ist der Unterschied zwischen Neumorphismus und Glassmorphismus?

A. Glassmorphismus verwendet backdrop-filter, um einen 'Milchglas'-Effekt zu erzeugen, der die Elementüberlappung (Z-Achse) darstellt. Neumorphismus verwendet den Hell-Dunkel-Kontrast von box-shadow, um 'Unebenheiten' darzustellen.

Q. Wirkt sich das auf die Leistung aus?

A. Da backdrop-filter das GPU-Compositing verwendet, ist eine moderate Verwendung in Ordnung. Die Anwendung hoher Unschärfe-Werte auf die gesamte Seite kann jedoch zu Framerate-Einbrüchen führen.

Q. Kann ich den generierten Code so wie er ist verwenden?

A. Ja. Fügen Sie einfach das kopierte CSS in Ihr Stylesheet ein, um es anzuwenden. Sie können den Klassennamen nach Bedarf ändern.