CSS/Eigenschaften/backdrop-filter

Browserunterstützung
caniuse.com

Die Eigenschaft backdrop-filter wendet grafische Effekte wie Unschärfe oder Farbverschiebung auf den Bereich hinter einem Element an. Da der Effekt auf alles hinter dem Element angewendet wird, müssen Sie das Element oder seinen Hintergrund zumindest teilweise transparent machen, um den Effekt zu sehen.

Erlaubte Werte

• none
  kein Filter wird angewendet
• <filter-function-list>: Alle Filterfunktionen, die auch in der filter-Eigenschaft verwendet werden dürfen

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

alle Elemente, auch SVG

Vererbung

nein

animierbar

ja

Beispiel

.box {
  background-color: rgb(255 255 255 / 0.3);
  backdrop-filter: blur(10px);
}

body {
  background-image: url("anemones.jpg");
}

Der body erhält ein Hintergrundbild. Die Box darüber ist halbtransparent - sodass der Hintergrund sichtbar ist, aber durch den blur-Filter weichgezeichnet wird.

Siehe auch

• SVG/Tutorials/Filter/Anwendung in CSS backdrop-filter

Weblinks

• Spezifikation (W3C): backdrop-filter
• MDN: backdrop-filter
• Details: caniuse.com