CSS-Karten-Generator Erstellen Sie glasmorphische Karten-Designs mit Hintergrundverschleierung, Transparenz und Schattenkontrolle.

Glassmorphismus basiert auf der CSS-Eigenschaft backdrop-filter, die grafische Effekte auf den Bereich hinter einem Element anwendet. Die wichtigste Funktion ist blur(), die das Aussehen von mattem Glas erzeugt. In Kombination mit einem halbtransparenten Hintergrund (mithilfe von rgba oder hsla) ermöglicht der Effekt es, dass Inhalte hinter der Karte sichtbar, aber unscharf sind. Der Rand verwendet eine leicht höhere Deckkraft als der Hintergrund für die Definition. Das Präfix -webkit-backdrop-filter ist erforderlich für die Unterstützung von Safari. Damit der Effekt funktioniert, muss das Element einen transparenten oder halbtransparenten Hintergrund haben und es müssen Inhalte hinter ihm vorhanden sein, um diese zu verschwimmen. Leistungsüberlegung: backdrop-filter kann bei großen Elementen oder wenn viele verschwommene Elemente überlappen teuer sein. Verwenden Sie will-change: backdrop-filter, um den Browser über die animierte Eigenschaft hinzuweisen. Für einen Fallback stellen Sie einen festen halbtransparenten Hintergrund für Browser bereit, die backdrop-filter nicht unterstützen.