W3cubDocs

/CSS

Filter Effects

Filter Effects is a module of CSS that defines a way of processing an element’s rendering before it is displayed in the document.

Reference

Properties

Data types

Specifications

Specification Status Comment
Filter Effects Module Level 1
The definition of 'filter' in that specification.
Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHub

backdrop-filter property

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
backdrop-filter 76
76
47
Disabled
Disabled From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
17 70
Disabled
70
Disabled
Disabled From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 34
Disabled
34
Disabled
Disabled From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
9
Prefixed
9
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
backdrop-filter 76 76
76
47
Disabled
Disabled From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
No
No
See bug 1178765.
54
54
34
Disabled
Disabled From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
9
Prefixed
9
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.0

filter property

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
filter 53
53
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
In Chrome 18 to 19, the saturate() function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
35
35
34
Disabled
Disabled From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
46
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No
No
Internet Explorer 4 to 9 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.
40
40
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.1
9.1
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
On SVG elements No No 35 No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
filter 53
53
4.4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
53 35
35
34
Disabled
Disabled From version 34: this feature is behind the layout.css.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
46
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
41
41
14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
9.3
9.3
6
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
6.0
On SVG elements No No 35 No No No

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Filter_Effects