Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad CSS de backdrop-filter le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está detrás del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.

/* Valor de palabra clave */
backdrop-filter: none;

/* URL al filtro SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* valores <filter-function> */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Múltiples filtros */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Valores globales */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

Valor inicialnone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typea filter function list
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

Valores

none
No se aplica filtro al fondo.
<filter-function-list>
Una lista separada por espacios de <filter-function> o un filtro SVG que se aplicará al fondo.

Sintaxis formal

none | <filter-function-list>

where
<filter-function-list> = [ <filter-function> | <url> ]+

where
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>

where
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )

where
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ejemplo

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1; 
  backdrop-filter: blur(10px);  
  -webkit-backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

Resultado

Especificaciones

Especificación Estado Comentario
Filter Effects Module Level 2
La definición de 'backdrop-filter' en esta especificación.
Editor's Draft Definición inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básico
Experimental
Chrome Soporte completo 47
Deshabilitado
Soporte completo 47
Deshabilitado
Deshabilitado From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Soporte completo 17Firefox Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1178765.
IE Sin soporte NoOpera Soporte completo 34
Deshabilitado
Soporte completo 34
Deshabilitado
Deshabilitado From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
Safari Soporte completo 9
Prefijado
Soporte completo 9
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Sin soporte NoChrome Android Soporte completo 47
Deshabilitado
Soporte completo 47
Deshabilitado
Deshabilitado From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Soporte completo 17Firefox Android Sin soporte No
Notas
Sin soporte No
Notas
Notas See bug 1178765.
Opera Android ? Safari iOS ? Samsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso
Última actualización por: lajaso,