Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
backdrop-filter
Baseline 2024Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
A propriedadeCSSbackdrop-filter permite que você aplique efeitos gráficos, como desfoque ou mudança de cores, na área ao fundo de um elemento. Como ela se aplica a tudo que ficaatrás do elemento, é preciso deixá-lo (ou o seu plando de fundo) ao menos parcialmente transparente para poder ver o efeito em ação.
css
/* Valor de palavra-chave */backdrop-filter: none;/* Filtro com URL para 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%);/* Vários filtros */backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);/* Valores globais */backdrop-filter: inherit;backdrop-filter: initial;backdrop-filter: unset;Sintaxe
Valores
noneNenhum filtro é aplicado ao plano de fundo.
<filter-function-list>Uma lista de
<filter-function>s separadas por espaços ou umfiltro SVG que será aplicado ao plano de fundo.
Definição formal
| Initial value | none |
|---|---|
| Aplica-se a | all elements; In SVG, it applies to container elements excluding the<defs> element and all graphics elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | afilter function list |
Sintaxe 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()>
<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>]?)
Exemplo
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(https://picsum.photos/id/1080/6858/4574); 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> <div> <p>backdrop-filter: blur(10px)</p> </div></div>Resultado
Especificações
| Specification |
|---|
| Filter Effects Module Level 2 # BackdropFilterProperty |