Glassmorphism-Generator Erstellen Sie matte Glas-Effekte für die Benutzeroberfläche mit Kontrolle über Hintergrundverschleierung, Transparenz und Sättigung.

Glassmorphismus basiert auf der backdrop-filter-CSS-Eigenschaft, insbesondere den blur()- und saturate()-Funktionen. backdrop-filter wendet Effekte auf den Bereich hinter einem Element an, im Gegensatz zu filter, das das Element selbst beeinflusst. Das Element muss einen halbtransparenten Hintergrund (mithilfe von rgba oder hsla) haben, damit die Unscharfe sichtbar ist. Der blur()-Wert in Pixeln steuert die Intensität des mattierten Effekts - 10-20px sind typisch. Ein saturate()-Wert über 100 % verstärkt die Farben, die durch das Glas sichtbar sind. Die Begrenzungslinie verwendet eine leicht höhere Deckkraft-Version der Hintergrundfarbe für die Definition. box-shadow fügt Tiefe hinzu. Das -webkit-backdrop-filter-Präfix ist für Safari erforderlich. Für den Fallback sollten Sie einen undurchsichtigeren Hintergrund für Browser bereitstellen, die backdrop-filter nicht unterstützen. Verwenden Sie @supports (backdrop-filter: blur(1px)) für die Funktionsdetektion. Hinweis zur Leistung: backdrop-filter kann bei großen Elementen oder wenn mehrere unscharfe Schichten gestapelt werden, teuer sein.