CSS Filter Effects
Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49webkit |
|||||||||||||||||
56 | 9.3 | 4.4webkit |
|||||||||||||||
14
See notes:
|
52 | 57 | 10 | 10.0-10.2 | 4.4.3-4.4.4webkit |
4webkit |
|||||||||||
11 | 15
See notes:
|
53 | 58 | 10.1 | 44 | 10.3 | all | 56 | 10webkit |
37o |
57 | 52 | 11 | 11.4webkit |
5webkit |
1.2webkit |
7.12webkit |
54 | 59 | TP | 45 | ||||||||||||||
55 | 60 | 46 | |||||||||||||||
56 | 61 |
Notes
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
-
1
Supported in Firefox under the
layout.css.filters.enabled
flag. -
2
Supported in MS Edge under the "Enable CSS filter property" flag.
-
3
Partial support in Firefox before version 34 only implemented the url() function of the filter property
-
4
Partial support refers to supporting filter functions, but not the
url
function.