14. März 2023

Blur-Effekte mit CSS

Blur-Effekte sind ein beliebtes Gestaltungsmittel im Web-Design. In CSS gibt es 2 Arten von Blur-Effekten: „filter: blur(8px)“ und „backdrop-filter: blur(8px)“.

Während ersterer schon sehr lange in allen gängigen Browsern funktioniert und eingesetzt werden kann, funktioniert die CSS-Eigenschaft „backdrop-filter: blur“ im Firefox erst seit Version 103, die im Juli 2022 veröffentlicht worden ist. Jetzt gibt es also keinen Grund mehr auf diesen Effekt zu verzichten oder FallBacks bereitzustellen.

Eine Möglichkeit diesen Filter zu benutzen ist z.B. ein halbtransparenter Button:

.blur-button{
backdrop-filter: blur(3px);
display:inline-block;
padding:20px 80px;
...
}

Eine weitere, besonders in Apps, beliebte Einsatzmöglichkeit, ist die Verwendung in fixierten Menüleisten.