Filter Effects - CSS: Cascading Style Sheets | MDN

Skip to main content
Select language
Skip to search

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

<filter-function>

Specifications

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

Browser compatibility

`backdrop-filter` property

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`backdrop-filter`	Chrome Full support 76 Full support 76 Full support 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.	Edge Full support 17	Firefox Full support 70 Disabled Full support 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.	IE No support No	Opera Full support 34 Disabled Full support 34 Disabled Disabled From version 34: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari Full support 9 Prefixed Full support 9 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 76	Chrome Android Full support 76 Full support 76 Full support 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.	Firefox Android No support No Notes No support No Notes Notes See bug 1178765.	Opera Android Full support 54 Full support 54 Full support 34 Disabled Disabled From version 34: this feature is behind the `Enable Experimental Web Platform Features` preference.	Safari iOS Full support 9 Prefixed Full support 9 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 12.0

Legend

Full support: Full support
No support: No support
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

`filter` property

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`filter`	Chrome Full support 53 Full support 53 Full support 18 Prefixed Notes Prefixed Implemented with the vendor prefix: -webkit- Notes In Chrome 18 to 19, the `saturate()` function only takes integers instead of decimal or percentage values. From Chrome 20, this bug is fixed.	Edge Full support 12 Full support 12 Full support 12 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Full support 35 Full support 35 Partial support 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. Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 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.	IE No support No Notes No support No Notes Notes Internet Explorer 4 to 9 implemented a non-standard `filter` property. The syntax was completely different from this one and is not documented here.	Opera Full support 40 Full support 40 Full support 15 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari Full support 9.1 Full support 9.1 Full support 6 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 53 Full support 53 Full support 4.4 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android Full support 53	Firefox Android Full support 35 Full support 35 Partial support 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. Full support 49 Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 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.	Opera Android Full support 41 Full support 41 Full support 14 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9.3 Full support 9.3 Full support 6 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 6.0
On SVG elements	Chrome No support No	Edge No support No	Firefox Full support 35	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 35	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

Last modified: Jul 7, 2020, by MDN contributors