Welche CSS-Eigenschaft erzeugt den Glaseffekt?

Die primäre Eigenschaft ist `backdrop-filter: blur()`, die den Unschärfeeffekt auf den Bereich hinter dem Element anwendet und nicht auf das Element selbst. Dies wird normalerweise mit einer semi-transparenten `background-color` unter Verwendung von RGBA- oder HSLA-Werten kombiniert.

Funktioniert dies in allen Browsern?

Die meisten modernen Browser unterstützen `backdrop-filter`. Firefox erfordert gelegentlich, dass in älteren Versionen das Flag `layout.css.backdrop-filter.enabled` auf true gesetzt wird, daher wird die Angabe einer Fallback-Hintergrundfarbe empfohlen.

Warum erscheint der Unschärfeeffekt in meinem Projekt nicht?

Stellen Sie sicher, dass das Element einen transparenten oder semi-transparenten Hintergrund hat. Wenn der Hintergrund vollständig undurchsichtig ist, wird der Unschärfeeffekt, der hinter dem Element stattfindet, nicht sichtbar sein.

Kann ich dies für UI-Komponenten in der Produktion verwenden?

Ja. Glassmorphism ist ein gängiges Designmuster für Karten, Navigationsleisten und Modals. Das generierte CSS ist standardkonform und bereit für die Verwendung in jedem Stylesheet.

Farbe & Design

Glassmorphismus-Generator

Frosted-glass UI cards with backdrop-filter.

Runs in your browser

Anmerkung der Redaktion

Understanding · Frosted glass, in three CSS properties.

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

Quick answers.

›Which CSS property creates the glass effect?

The primary property is `backdrop-filter: blur()`, which applies the blur to the area behind the element rather than the element itself. This is usually paired with a semi-transparent `background-color` using RGBA or HSLA values.

›Does this work in all browsers?

Most modern browsers support `backdrop-filter`. Firefox occasionally requires the `layout.css.backdrop-filter.enabled` flag to be set to true in older versions, so including a fallback background colour is recommended.

›Why does the blur not appear in my project?

Ensure the element has a transparent or semi-transparent background. If the background is fully opaque, the blur effect happening behind the element will be hidden from view.

›Can I use this for production UI components?

Yes. Glassmorphism is a common design pattern for cards, navigation bars, and modals. The generated CSS is standard-compliant and ready for use in any stylesheet.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Farbe & Design