Css backdrop filter caniuse

backdrop-filter

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Try it

Syntax

/* Keyword value */ backdrop-filter: none; /* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* values */ 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%); /* Multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* Global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: revert; backdrop-filter: revert-layer; backdrop-filter: unset; 

Values

No filter is applied to the backdrop.

Formal definition

Initial value	none
Applies to	all elements; In SVG, it applies to container elements excluding the element and all graphics elements
Inherited	no
Computed value	as specified
Animation type	a filter function list

Formal syntax

backdrop-filter =
none |

=
[ | ]+

=
|
|
|
|
|
|
|
|
|

=
url( * ) |
src( * )

=
blur( ? )

=
brightness( [ | ]? )

=
contrast( [ | ]? )

=
drop-shadow( [ ? && ] )

=
grayscale( [ | ]? )

=
hue-rotate( [ | ]? )

=
invert( [ | ]? )

=
opacity( [ | ]? )

=
sepia( [ | ]? )

=
saturate( [ | ]? )

Examples

CSS

.box  background-color: rgb(255 255 255 / 0.3); backdrop-filter: blur(10px); > body  background-image: url("anemones.jpg"); > 

html, body  height: 100%; width: 100%; > .container  background-size: cover; align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; > .box  border-radius: 5px; font-family: sans-serif; text-align: center; max-width: 50%; max-height: 50%; padding: 20px 40px; > 

HTML

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

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 31, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Css backdrop filter caniuse

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

Chrome

1. 4 — 46 : Not supported
2. 47 — 75 : Disabled by default
3. 76 — 114 : Supported
4. 115 : Supported
5. 116 — 118 : Supported

Edge

1. 12 — 16 : Not supported
2. 17 — 18 : Supported
3. 79 — 114 : Supported
4. 115 : Supported

Safari

1. 3.1 — 8 : Not supported
2. 9 — 16.4 : Supported
3. 16.5 : Supported
4. 16.6 — TP : Supported

Firefox

1. 2 — 69 : Not supported
2. 70 — 102 : Disabled by default
3. 103 — 114 : Supported
4. 115 : Supported
5. 116 — 117 : Supported

Opera

1. 9 — 33 : Not supported
2. 34 — 63 : Disabled by default
3. 64 — 99 : Supported
4. 100 : Supported

IE

Chrome for Android

Safari on iOS

1. 3.2 — 8.4 : Not supported
2. 9 — 16.4 : Supported
3. 16.5 : Supported
4. 16.6 — 17 : Supported

Samsung Internet

1. 4 : Not supported
2. 5 — 11.2 : Disabled by default
3. 12.0 — 20 : Supported
4. 21 : Supported

Opera Mini

Opera Mobile

UC Browser for Android

Android Browser

Firefox for Android

QQ Browser

Baidu Browser

KaiOS Browser

Can I use.

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for June, 2023

Location detection provided by ipinfo.io.

Support via Patreon

Become a caniuse Patron to support the site for only $1/month!

Site links

Legend

• Green = Supported
• Red = Not supported
• Greenish yellow = Partial support
• Gray = Support unknown

Источник

Css backdrop filter caniuse

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

Chrome

1. 4 — 46 : Not supported
2. 47 — 75 : Disabled by default
3. 76 — 114 : Supported
4. 115 : Supported
5. 116 — 118 : Supported

Edge

1. 12 — 16 : Not supported
2. 17 — 18 : Supported
3. 79 — 114 : Supported
4. 115 : Supported

Safari

1. 3.1 — 8 : Not supported
2. 9 — 16.4 : Supported
3. 16.5 : Supported
4. 16.6 — TP : Supported

Firefox

1. 2 — 69 : Not supported
2. 70 — 102 : Disabled by default
3. 103 — 114 : Supported
4. 115 : Supported
5. 116 — 117 : Supported

Opera

1. 9 — 33 : Not supported
2. 34 — 63 : Disabled by default
3. 64 — 99 : Supported
4. 100 : Supported

IE

Chrome for Android

Safari on iOS

1. 3.2 — 8.4 : Not supported
2. 9 — 16.4 : Supported
3. 16.5 : Supported
4. 16.6 — 17 : Supported

Samsung Internet

1. 4 : Not supported
2. 5 — 11.2 : Disabled by default
3. 12.0 — 20 : Supported
4. 21 : Supported

Opera Mini

Opera Mobile

UC Browser for Android

Android Browser

Firefox for Android

QQ Browser

Baidu Browser

KaiOS Browser

Can I use.

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for June, 2023

Location detection provided by ipinfo.io.

Support via Patreon

Become a caniuse Patron to support the site for only $1/month!

Site links

Legend

• Green = Supported
• Red = Not supported
• Greenish yellow = Partial support
• Gray = Support unknown

Источник

Продвинутые CSS фильтры

Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop — то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background — тоже фон, но является частью элемента, к нему и относится свойство background.

Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций. В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).

CSS фильтры такие как blur(), contrast() или grayscale() — отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

Сегодня я хочу пойти чуть дальше, показав новые возможности CSS.

backdrop-filter

В первую очередь — это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение — это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub — прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное — размытие как в iOS:

Каждый элемент за header`ом размыт на 5px. Это так просто.

Живой пример на JSBin (только Safari 9).

для того, чтобы применить backdrop-filter вместе с небольшими корректировками (background-color и позиционирование), чтобы сохранить читаемость header`а в неподдерживаемых браузерах.

backdrop-filter может повысить читаемость текста, наложенного поверх изображения:

Живой пример на JSBin (только Safari 9).

Комбинируя несколько фильтров, вы можете сделать простые графические эффекты, близкие к тем, которые предлагает CSS blend-modes:

Живой пример на JSBin (только Safari 9).

• фон элемента, к которому применен backdrop-filter, должен быть полу-прозрачным. Если нет, то вы никогда не увидите эффект
• есть баг при комбинировании backdrop-filter с любым свойством, которое обрезает элемент (border-radius, mask, clip-path, etc). Это означает, что продвинутые эффекты пока невозможны
• backdrop-filter создает новый контекст наложения, как opacity
• backdrop-filter можно анимировать
• это свойство требует префикс: -webkit-backdrop-filter
• CanIUse

filter()

Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:

В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она — вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.

Источник

backdrop-filter

The backdrop-filter property in CSS is used to apply filter effects ( grayscale , contrast , blur , etc) to the background/backdrop of an element. The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content. Classic example:

Filtered backgrounds without backdrop-filter

Before backdrop-filter , the only way to add a filtered background was to add a separate “background” element, position it behind the foreground element(s) and filter it like so:

The backdrop-filter property allows you to eliminate this extra “background” element and apply filters to the backdrop directly:

.foreground < backdrop-filter: blur(10px); >/* No .wrapper needed! */

At the time of writing, backdrop-filter is part of the Filter Effects Module 2 Editor’s Draft and is not officially part of any specification. Browser support is currently limited (see below).

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() – (for applying SVG filters)

You can apply multiple s to a backdrop, like so:

See the W3C Filter Effects Module Working Draft for acceptable values for each of the filter functions.

For a comprehensive look at filter functions and nifty ways to use them together, see the filter almanac entry on CSS-Tricks.

The following Pen is forked from an example in Robin Rendle’s article exploring backdrop-filter .

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Источник