CSS Filter Effects
CSS Filter Effects
Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.
| Spec | http://www.w3.org/TR/filter-effects-1/ |
|---|---|
| Status | W3C Working Draft |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 | 62 | ||||
| 56 | 61 | TP | 48 | ||
| 16 (4) | 55 | 60 | 11 | 47 | |
| 11 | 15 (4) | 54 | 59 | 10.1 | 46 |
| 10 | 14 (4) | 53 | 58 | 10 | 45 |
| 9 | 13 (4) | 52 | 57 | 9.1 | 44 |
| 8 | 12 (2,4) | 51 | 56 | 9 (*) | 43 |
| Show all | |||||
| 7 | 50 | 55 | 8 (*) | 42 | |
| 6 | 49 | 54 | 7.1 (*) | 41 | |
| 5.5 | 48 | 53 | 7 (*) | 40 | |
| 47 | 52 (*) | 6.1 (*) | 39 (*) | ||
| 46 | 51 (*) | 6 (*) | 38 (*) | ||
| 45 | 50 (*) | 5.1 | 37 (*) | ||
| 44 | 49 (*) | 5 | 36 (*) | ||
| 43 | 48 (*) | 4 | 35 (*) | ||
| 42 | 47 (*) | 3.2 | 34 (*) | ||
| 41 | 46 (*) | 3.1 | 33 (*) | ||
| 40 | 45 (*) | 32 (*) | |||
| 39 | 44 (*) | 31 (*) | |||
| 38 | 43 (*) | 30 (*) | |||
| 37 | 42 (*) | 29 (*) | |||
| 36 | 41 (*) | 28 (*) | |||
| 35 | 40 (*) | 27 (*) | |||
| 34 (1) | 39 (*) | 26 (*) | |||
| 33 (3) | 38 (*) | 25 (*) | |||
| 32 (3) | 37 (*) | 24 (*) | |||
| 31 (3) | 36 (*) | 23 (*) | |||
| 30 (3) | 35 (*) | 22 (*) | |||
| 29 (3) | 34 (*) | 21 (*) | |||
| 28 (3) | 33 (*) | 20 (*) | |||
| 27 (3) | 32 (*) | 19 (*) | |||
| 26 (3) | 31 (*) | 18 (*) | |||
| 25 (3) | 30 (*) | 17 (*) | |||
| 24 (3) | 29 (*) | 16 (*) | |||
| 23 (3) | 28 (*) | 15 (*) | |||
| 22 (3) | 27 (*) | 12.1 | |||
| 21 (3) | 26 (*) | 12 | |||
| 20 (3) | 25 (*) | 11.6 | |||
| 19 (3) | 24 (*) | 11.5 | |||
| 18 (3) | 23 (*) | 11.1 | |||
| 17 (3) | 22 (*) | 11 | |||
| 16 (3) | 21 (*) | 10.6 | |||
| 15 (3) | 20 (*) | 10.5 | |||
| 14 (3) | 19 (*) | 10.0-10.1 | |||
| 13 (3) | 18 (*) | 9.5-9.6 | |||
| 12 (3) | 17 | 9 | |||
| 11 (3) | 16 | ||||
| 10 (3) | 15 | ||||
| 9 (3) | 14 | ||||
| 8 (3) | 13 | ||||
| 7 (3) | 12 | ||||
| 6 (3) | 11 | ||||
| 5 (3) | 10 | ||||
| 4 (3) | 9 | ||||
| 3.6 (3) | 8 | ||||
| 3.5 | 7 | ||||
| 3 | 6 | ||||
| 2 | 5 | ||||
| 4 | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 | |||||||||||
| 10.3 | all | 56 | 10 (*) | 37 (*) | 59 | 54 | 11 | 11.4 (*) | 5 (*) | 1.2 (*) | 7.12 (*) |
| 10.0-10.2 | 4.4.3-4.4.4 (*) | 7 | 12.1 | 10 | 4 (*) | ||||||
| 9.3 | 4.4 (*) | 12 | |||||||||
| 9.0-9.2 (*) | 4.2-4.3 | 11.5 | |||||||||
| Show all | |||||||||||
| 8.1-8.4 (*) | 4.1 | 11.1 | |||||||||
| 8 (*) | 4 | 11 | |||||||||
| 7.0-7.1 (*) | 3 | 10 | |||||||||
| 6.0-6.1 (*) | 2.3 | ||||||||||
| 5.0-5.1 | 2.2 | ||||||||||
| 4.2-4.3 | 2.1 | ||||||||||
| 4.0-4.1 | |||||||||||
| 3.2 | |||||||||||
Notes
Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.
Supported in Firefox under the
layout.css.filters.enabledflag.Supported in MS Edge under the "Enable CSS filter property" flag.
Partial support in Firefox before version 34 only implemented the url() function of the filter property
Partial support refers to supporting filter functions, but not the
urlfunction.
- * Partial support with prefix.
Resources
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-filters
