CSS Backdrop Filter

Method of applying filter effects (like blur, grayscale or hue) to content/elements below the target element.

Spec https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty
Status Unofficial / Note
IE Edge Firefox Chrome Safari Opera
      98    
    95 (3) 97    
    94 (3) 96 TP (*)  
11 95 93 (3) 95 15 (*) 80
10 94 92 (3) 94 14.1 (*) 79
9 93 91 (3) 93 14 (*) 78
8 92 90 (3) 92 13.1 (*) 77
Show all
7 91 89 (3) 91 13 (*) 76
6 90 88 (3) 90 12.1 (*) 75
5.5 89 87 (3) 89 12 (*) 74
  88 86 (3) 88 11.1 (*) 73
  87 85 (3) 87 11 (*) 72
  86 84 (3) 86 10.1 (*) 71
  85 83 (3) 85 10 (*) 70
  84 82 (3) 84 9.1 (*) 69
  83 81 (3) 83 9 (*) 68
  81 80 (3) 81 8 67
  80 79 (3) 80 7.1 66
  79 78 (3) 79 7 65
  18 (2) 77 (3) 78 6.1 64
  17 (2) 76 (3) 77 6 63 (1)
  16 75 (3) 76 5.1 62 (1)
  15 74 (3) 75 (1) 5 60 (1)
  14 73 (3) 74 (1) 4 58 (1)
  13 72 (3) 73 (1) 3.2 57 (1)
  12 71 (3) 72 (1) 3.1 56 (1)
    70 (3) 71 (1)   55 (1)
    69 70 (1)   54 (1)
    68 69 (1)   53 (1)
    67 68 (1)   52 (1)
    66 67 (1)   51 (1)
    65 66 (1)   50 (1)
    64 65 (1)   49 (1)
    63 64 (1)   48 (1)
    62 63 (1)   47 (1)
    61 62 (1)   46 (1)
    60 61 (1)   45 (1)
    59 60 (1)   44 (1)
    58 59 (1)   43 (1)
    57 58 (1)   42 (1)
    56 57 (1)   41 (1)
    55 56 (1)   40 (1)
    54 55 (1)   39 (1)
    53 54 (1)   38 (1)
    52 53 (1)   37 (1)
    51 52 (1)   36 (1)
    50 51 (1)   35 (1)
    49 50 (1)   34 (1)
    48 49 (1)   33
    47 48 (1)   32
    46 47 (1)   31
    45 46   30
    44 45   29
    43 44   28
    42 43   27
    41 42   26
    40 41   25
    39 40   24
    38 39   23
    37 38   22
    36 37   21
    35 36   20
    34 35   19
    33 34   18
    32 33   17
    31 32   16
    30 31   15
    29 30   12.1
    28 29   12
    27 28   11.6
    26 27   11.5
    25 26   11.1
    24 25   11
    23 24   10.6
    22 23   10.5
    21 22   10.0-10.1
    20 21   9.5-9.6
    19 20   9
    18 19    
    17 18    
    16 17    
    15 16    
    14 15    
    13 14    
    12 13    
    11 12    
    10 11    
    9 10    
    8 9    
    7 8    
    6 7    
    5 6    
    4 5    
    3.6 4    
    3.5      
    3      
    2      
Safari on iOS Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser KaiOS Browser
15 (*) all 94 10 64 94 92 (3) 11 12.12 15.0 10.4 (1) 7.12 (1) 2.5
14.5-14.8 (*)   4.4.3-4.4.4 7 12.1     10   14.0      
14.0-14.4 (*)   4.4   12         13.0      
13.4-13.7 (*)   4.2-4.3   11.5         12.0      
Show all
13.3 (*)   4.1   11.1         11.1-11.2 (1)      
13.2 (*)   4   11         10.1 (1)      
13.0-13.1 (*)   3   10         9.2 (1)      
12.2-12.5 (*)   2.3             8.2 (1)      
12.0-12.1 (*)   2.2             7.2-7.4 (1)      
11.3-11.4 (*)   2.1             6.2-6.4 (1)      
11.0-11.2 (*)                 5.0-5.4 (1)      
10.3 (*)                 4      
10.0-10.2 (*)                        
9.3 (*)                        
9.0-9.2 (*)                        
8.1-8.4                        
8                        
7.0-7.1                        
6.0-6.1                        
5.0-5.1                        
4.2-4.3                        
4.0-4.1                        
3.2                        

Notes

  1. Can be enabled via the "Experimental Web Platform Features" flag

  2. Currently only supported with the -webkit- prefix (not -ms-)

  3. Can be enabled by setting the layout.css.backdrop-filter.enabled and gfx.webrender.all preference to true in about:config.

* Partial support with prefix.

Bugs

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-backdrop-filter