CSS backdrop-filter Eigenschap

Definitie en gebruik

backdrop-filter Deze eigenschap wordt gebruikt om grafische effecten toe te passen op het gebied achter het element.

Tip:Om het effect te zien, moet het element of zijn achtergrond ten minste gedeeltelijk transparant zijn.

Voeg grafische effecten toe aan het gebied achter het element:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

backdrop-filter: none|filter|initial|inherit;

Waarde	Beschrijving
none	Standaardwaarde. Geen filter toepassen op de achtergrond.
filter	Lijst van filterfuncties gescheiden door spaties, bijvoorbeeld: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() of wijst naar een URL van een SVG-filter.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouderlijke element. Raadpleeg inherit.

Standaardwaarde:	none
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntaxis:	object.style.backdropFilter="grayscale(100%)"

Getallen in de tabel geven de eerste browserversie aan die deze eigenschap volledig ondersteunt.

Getallen met -webkit- voorvoegsel geven de eerste versie aan die dit voorvoegsel ondersteunt.

Chrome	Edge	Firefox	Safari	Opera
76	79	103	9 -webkit-	63