W3cubDocs

/Support Tables

CSS Filter Effects

Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.

Spec https://www.w3.org/TR/filter-effects-1/
Status W3C Working Draft
IE Edge Firefox Chrome Safari Opera
      73    
    65 72    
    64 71 TP  
11 18 (4) 63 70 12 56
10 17 (4) 62 69 11.1 55
9 16 (4) 61 68 11 54
8 15 (4) 60 67 10.1 53
Show all
7 14 (4) 59 66 10 52
6 13 (4) 58 65 9.1 51
5.5 12 (2,4) 57 64 9 (*) 50
    56 63 8 (*) 49
    55 62 7.1 (*) 48
    54 61 7 (*) 47
    53 60 6.1 (*) 46
    52 59 6 (*) 45
    51 58 5.1 44
    50 57 5 43
    49 56 4 42
    48 55 3.2 41
    47 54 3.1 40
    46 53   39 (*)
    45 52 (*)   38 (*)
    44 51 (*)   37 (*)
    43 50 (*)   36 (*)
    42 49 (*)   35 (*)
    41 48 (*)   34 (*)
    40 47 (*)   33 (*)
    39 46 (*)   32 (*)
    38 45 (*)   31 (*)
    37 44 (*)   30 (*)
    36 43 (*)   29 (*)
    35 42 (*)   28 (*)
    34 (1) 41 (*)   27 (*)
    33 (3) 40 (*)   26 (*)
    32 (3) 39 (*)   25 (*)
    31 (3) 38 (*)   24 (*)
    30 (3) 37 (*)   23 (*)
    29 (3) 36 (*)   22 (*)
    28 (3) 35 (*)   21 (*)
    27 (3) 34 (*)   20 (*)
    26 (3) 33 (*)   19 (*)
    25 (3) 32 (*)   18 (*)
    24 (3) 31 (*)   17 (*)
    23 (3) 30 (*)   16 (*)
    22 (3) 29 (*)   15 (*)
    21 (3) 28 (*)   12.1
    20 (3) 27 (*)   12
    19 (3) 26 (*)   11.6
    18 (3) 25 (*)   11.5
    17 (3) 24 (*)   11.1
    16 (3) 23 (*)   11
    15 (3) 22 (*)   10.6
    14 (3) 21 (*)   10.5
    13 (3) 20 (*)   10.0-10.1
    12 (3) 19 (*)   9.5-9.6
    11 (3) 18 (*)   9
    10 (3) 17    
    9 (3) 16    
    8 (3) 15    
    7 (3) 14    
    6 (3) 13    
    5 (3) 12    
    4 (3) 11    
    3.6 (3) 10    
    3.5 9    
    3 8    
    2 7    
      6    
      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
12 all 67 10 (*) 46 70 63 11 11.8 7.2 1.2 (*) 7.12 (*)
11.3-11.4   4.4.3-4.4.4 (*) 7 12.1     10   6.2 (*)    
11.0-11.2   4.4 (*)   12         5 (*)    
10.3   4.2-4.3   11.5         4 (*)    
Show all
10.0-10.2   4.1   11.1              
9.3   4   11              
9.0-9.2 (*)   3   10              
8.1-8.4 (*)   2.3                  
8 (*)   2.2                  
7.0-7.1 (*)   2.1                  
6.0-6.1 (*)                      
5.0-5.1                      
4.2-4.3                      
4.0-4.1                      
3.2                      

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.

* Partial support with prefix.

Bugs

  • In Edge filter won't apply if the element or it's parent has negative z-index. See bug.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-filters