Atributo backdrop-filter CSS

Definición y uso

backdrop-filter Este atributo se utiliza para aplicar efectos gráficos al área detrás del elemento.

Consejo:Para ver el efecto, el elemento o su fondo debe ser al menos parcialmente transparente.

Ejemplo

Añade efectos gráficos al área detrás del elemento:

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

Prueba personal

Sintaxis de CSS

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

Valor del atributo

Valor Descripción
none Valor predeterminado. No aplica ningún filtro al fondo.
filter

Lista de funciones de filtro separadas por espacios, por ejemplo:

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

o apunta a la URL del filtro SVG.

initial Establece este atributo a su valor predeterminado. Ver: initial.
inherit Hereda este atributo del elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: none
Herencia: No
Producción de animación: Soporte. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.backdropFilter="grayscale(100%)"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que comenzó a soportar completamente este atributo.

Los números con prefijo -webkit- indican la versión en la que se comenzó a soportar este prefijo.

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

Páginas relacionadas

Tutoriales:Imágenes CSS

Referencia:Atributo CSS filter

Referencia:Atributo de filtro DOM HTML