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 |
---|---|---|---|---|---|
108 | |||||
107 | 107 | TP (*) | |||
106 | 106 | 16.1 (*) | |||
11 | 105 | 105 | 105 | 16.0 (*) | 91 |
10 | 104 | 104 | 104 | 15.6 (*) | 90 |
9 | 103 | 103 | 103 | 15.5 (*) | 89 |
8 | 102 | 102 (3) | 102 | 15.4 (*) | 88 |
Show all | |||||
7 | 101 | 101 (3) | 101 | 15.2-15.3 (*) | 87 |
6 | 100 | 100 (3) | 100 | 15.1 (*) | 86 |
5.5 | 99 | 99 (3) | 99 | 15 (*) | 85 |
98 | 98 (3) | 98 | 14.1 (*) | 84 | |
97 | 97 (3) | 97 | 14 (*) | 83 | |
96 | 96 (3) | 96 | 13.1 (*) | 82 | |
95 | 95 (3) | 95 | 13 (*) | 81 | |
94 | 94 (3) | 94 | 12.1 (*) | 80 | |
93 | 93 (3) | 93 | 12 (*) | 79 | |
92 | 92 (3) | 92 | 11.1 (*) | 78 | |
91 | 91 (3) | 91 | 11 (*) | 77 | |
90 | 90 (3) | 90 | 10.1 (*) | 76 | |
89 | 89 (3) | 89 | 10 (*) | 75 | |
88 | 88 (3) | 88 | 9.1 (*) | 74 | |
87 | 87 (3) | 87 | 9 (*) | 73 | |
86 | 86 (3) | 86 | 8 | 72 | |
85 | 85 (3) | 85 | 7.1 | 71 | |
84 | 84 (3) | 84 | 7 | 70 | |
83 | 83 (3) | 83 | 6.1 | 69 | |
81 | 82 (3) | 81 | 6 | 68 | |
80 | 81 (3) | 80 | 5.1 | 67 | |
79 | 80 (3) | 79 | 5 | 66 | |
18 (2) | 79 (3) | 78 | 4 | 65 | |
17 (2) | 78 (3) | 77 | 3.2 | 64 | |
16 | 77 (3) | 76 | 3.1 | 63 (1) | |
15 | 76 (3) | 75 (1) | 62 (1) | ||
14 | 75 (3) | 74 (1) | 60 (1) | ||
13 | 74 (3) | 73 (1) | 58 (1) | ||
12 | 73 (3) | 72 (1) | 57 (1) | ||
72 (3) | 71 (1) | 56 (1) | |||
71 (3) | 70 (1) | 55 (1) | |||
70 (3) | 69 (1) | 54 (1) | |||
69 | 68 (1) | 53 (1) | |||
68 | 67 (1) | 52 (1) | |||
67 | 66 (1) | 51 (1) | |||
66 | 65 (1) | 50 (1) | |||
65 | 64 (1) | 49 (1) | |||
64 | 63 (1) | 48 (1) | |||
63 | 62 (1) | 47 (1) | |||
62 | 61 (1) | 46 (1) | |||
61 | 60 (1) | 45 (1) | |||
60 | 59 (1) | 44 (1) | |||
59 | 58 (1) | 43 (1) | |||
58 | 57 (1) | 42 (1) | |||
57 | 56 (1) | 41 (1) | |||
56 | 55 (1) | 40 (1) | |||
55 | 54 (1) | 39 (1) | |||
54 | 53 (1) | 38 (1) | |||
53 | 52 (1) | 37 (1) | |||
52 | 51 (1) | 36 (1) | |||
51 | 50 (1) | 35 (1) | |||
50 | 49 (1) | 34 (1) | |||
49 | 48 (1) | 33 | |||
48 | 47 (1) | 32 | |||
47 | 46 | 31 | |||
46 | 45 | 30 | |||
45 | 44 | 29 | |||
44 | 43 | 28 | |||
43 | 42 | 27 | |||
42 | 41 | 26 | |||
41 | 40 | 25 | |||
40 | 39 | 24 | |||
39 | 38 | 23 | |||
38 | 37 | 22 | |||
37 | 36 | 21 | |||
36 | 35 | 20 | |||
35 | 34 | 19 | |||
34 | 33 | 18 | |||
33 | 32 | 17 | |||
32 | 31 | 16 | |||
31 | 30 | 15 | |||
30 | 29 | 12.1 | |||
29 | 28 | 12 | |||
28 | 27 | 11.6 | |||
27 | 26 | 11.5 | |||
26 | 25 | 11.1 | |||
25 | 24 | 11 | |||
24 | 23 | 10.6 | |||
23 | 22 | 10.5 | |||
22 | 21 | 10.0-10.1 | |||
21 | 20 | 9.5-9.6 | |||
20 | 19 | 9 | |||
19 | 18 | ||||
18 | 17 | ||||
17 | 16 | ||||
16 | 15 | ||||
15 | 14 | ||||
14 | 13 | ||||
13 | 12 | ||||
12 | 11 | ||||
11 | 10 | ||||
10 | 9 | ||||
9 | 8 | ||||
8 | 7 | ||||
7 | 6 | ||||
6 | 5 | ||||
5 | 4 | ||||
4 | |||||
3.6 | |||||
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 |
---|---|---|---|---|---|---|---|---|---|---|---|---|
16.1 (*) | ||||||||||||
16.0 (*) | all | 105 | 10 | 64 | 105 | 104 | 11 | 13.4 | 18.0 | 13.1 | 13.18 | 2.5 |
15.6 (*) | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 17.0 | |||||||
15.5 (*) | 4.4 | 12 | 16.0 | |||||||||
15.4 (*) | 4.2-4.3 | 11.5 | 15.0 | |||||||||
Show all | ||||||||||||
15.2-15.3 (*) | 4.1 | 11.1 | 14.0 | |||||||||
15.0-15.1 (*) | 4 | 11 | 13.0 | |||||||||
14.5-14.8 (*) | 3 | 10 | 12.0 | |||||||||
14.0-14.4 (*) | 2.3 | 11.1-11.2 (1) | ||||||||||
13.4-13.7 (*) | 2.2 | 10.1 (1) | ||||||||||
13.3 (*) | 2.1 | 9.2 (1) | ||||||||||
13.2 (*) | 8.2 (1) | |||||||||||
13.0-13.1 (*) | 7.2-7.4 (1) | |||||||||||
12.2-12.5 (*) | 6.2-6.4 (1) | |||||||||||
12.0-12.1 (*) | 5.0-5.4 (1) | |||||||||||
11.3-11.4 (*) | 4 | |||||||||||
11.0-11.2 (*) | ||||||||||||
10.3 (*) | ||||||||||||
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 |
Can be enabled via the "Experimental Web Platform Features" flag
Currently only supported with the -webkit-
prefix (not -ms-)
Can be enabled by setting the layout.css.backdrop-filter.enabled
and gfx.webrender.all
preference to true
in about:config.
Chrome feature request: Chromium issue #497522
Firefox feature request: Mozilla bug #1178765
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-backdrop-filter