backdrop-filter

Властивість CSS backdrop-filter (фільтр задника) дає змогу застосувати графічні ефекти, як то розмиття чи зсув кольору, до області під елементом. Через те, що вона застосовується до всього під елементом, для того, аби помітити її ефект, елемент повинен бути повністю або частково прозорим.

Спробуйте його в дії

Синтаксис

/* Значення – ключове слово */
backdrop-filter: none;

/* Фільтр з URL до SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* Значення <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%);

/* Декілька фільтрів */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Глобальні значення */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

Значення

none

До задника не застосовується жодний фільтр.

<filter-function-list>

Розділений пробілами список значень <filter-function>, або SVG-фільтр, що буде застосовано до задника. Серед значень <filter-function> CSS – blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() і sepia().

Формальне визначення

Формальний синтаксис

none | <filter-function-list>

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

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

де
<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> )

де
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

де
<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>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

CSS

.box {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: blur(10px);
}

body {
  background-image: url("anemones.jpg");
}

HTML

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

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
backdrop-filter
Chrome Full support 76
Edge Full support 17
Firefox Full support 70
disabled footnote
Internet Explorer No support No
Opera Full support 63
Safari Full support 9
prefix
WebView Android Full support 76
Chrome Android Full support 76
Firefox for Android No support No
footnote
Opera Android Full support 54
Safari on iOS Full support 9
prefix
Samsung Internet Full support 12.0

Дивіться також