backdrop-filter

Baseline 2024
Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Pruébalo

Sintaxis

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

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

/* valores de <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: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

Valores

none

No se aplica ningún filtro al fondo.

<filter-function-list>

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

Definicion formal

Valor inicialnone
Applies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Heredableno
Valor calculadocomo se especifica
Animation typea filter function list

Sintaxis formal

backdrop-filter = 
none |
<filter-value-list>

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

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

<url> =
<url()> |
<src()>

<blur()> =
blur( <length>? )

<brightness()> =
brightness( [ <number> | <percentage> ]? )

<contrast()> =
contrast( [ <number> | <percentage> ]? )

<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )

<grayscale()> =
grayscale( [ <number> | <percentage> ]? )

<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )

<invert()> =
invert( [ <number> | <percentage> ]? )

<opacity()> =
opacity( [ <number> | <percentage> ]? )

<sepia()> =
sepia( [ <number> | <percentage> ]? )

<saturate()> =
saturate( [ <number> | <percentage> ]? )

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Ejemplos

CSS

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

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

body {
  background-image:
    url("anemones.jpg"), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  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

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

Resultado

Especificaciones

Specification
Filter Effects Module Level 2
# BackdropFilterProperty

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
backdrop-filter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también