Proprietà backdrop-filter CSS

Definizione e uso

backdrop-filter L'attributo viene utilizzato per applicare effetti grafici all'area dietro l'elemento.

Suggerimento:Per vedere l'effetto, l'elemento o il suo sfondo deve essere almeno in parte trasparente.

Esempio

Aggiungi effetti grafici all'area dietro l'elemento:

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

Prova da solo

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
none Valore predefinito. Non applicare nessun filtro di sfondo.
filter

Elenco delle funzioni di filtro separato da spazi, ad esempio:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

o un URL che punta a un filtro SVG.

initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Inherita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: none
Ereditarietà: No
Creazione animazione: Supporto. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.backdropFilter="grayscale(100%)"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

I numeri con prefisso -webkit- rappresentano la versione iniziale di supporto per tale prefisso.

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

Pagine correlate

Tutorial:Immagini CSS

Riferimento:Proprietà filter CSS

Riferimento:Proprietà filter DOM HTML