W3cubDocs

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
			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 ⁽³⁾	102	15.4 ^(*)	88
Show all
7	101	101 ⁽³⁾	101	15.2-15.3 ^(*)	87
6	100	100 ⁽³⁾	100	15.1 ^(*)	86
5.5	99	99 ⁽³⁾	99	15 ^(*)	85
	98	98 ⁽³⁾	98	14.1 ^(*)	84
	97	97 ⁽³⁾	97	14 ^(*)	83
	96	96 ⁽³⁾	96	13.1 ^(*)	82
	95	95 ⁽³⁾	95	13 ^(*)	81
	94	94 ⁽³⁾	94	12.1 ^(*)	80
	93	93 ⁽³⁾	93	12 ^(*)	79
	92	92 ⁽³⁾	92	11.1 ^(*)	78
	91	91 ⁽³⁾	91	11 ^(*)	77
	90	90 ⁽³⁾	90	10.1 ^(*)	76
	89	89 ⁽³⁾	89	10 ^(*)	75
	88	88 ⁽³⁾	88	9.1 ^(*)	74
	87	87 ⁽³⁾	87	9 ^(*)	73
	86	86 ⁽³⁾	86	8	72
	85	85 ⁽³⁾	85	7.1	71
	84	84 ⁽³⁾	84	7	70
	83	83 ⁽³⁾	83	6.1	69
	81	82 ⁽³⁾	81	6	68
	80	81 ⁽³⁾	80	5.1	67
	79	80 ⁽³⁾	79	5	66
	18 ⁽²⁾	79 ⁽³⁾	78	4	65
	17 ⁽²⁾	78 ⁽³⁾	77	3.2	64
	16	77 ⁽³⁾	76	3.1	63 ⁽¹⁾
	15	76 ⁽³⁾	75 ⁽¹⁾		62 ⁽¹⁾
	14	75 ⁽³⁾	74 ⁽¹⁾		60 ⁽¹⁾
	13	74 ⁽³⁾	73 ⁽¹⁾		58 ⁽¹⁾
	12	73 ⁽³⁾	72 ⁽¹⁾		57 ⁽¹⁾
		72 ⁽³⁾	71 ⁽¹⁾		56 ⁽¹⁾
		71 ⁽³⁾	70 ⁽¹⁾		55 ⁽¹⁾
		70 ⁽³⁾	69 ⁽¹⁾		54 ⁽¹⁾
		69	68 ⁽¹⁾		53 ⁽¹⁾
		68	67 ⁽¹⁾		52 ⁽¹⁾
		67	66 ⁽¹⁾		51 ⁽¹⁾
		66	65 ⁽¹⁾		50 ⁽¹⁾
		65	64 ⁽¹⁾		49 ⁽¹⁾
		64	63 ⁽¹⁾		48 ⁽¹⁾
		63	62 ⁽¹⁾		47 ⁽¹⁾
		62	61 ⁽¹⁾		46 ⁽¹⁾
		61	60 ⁽¹⁾		45 ⁽¹⁾
		60	59 ⁽¹⁾		44 ⁽¹⁾
		59	58 ⁽¹⁾		43 ⁽¹⁾
		58	57 ⁽¹⁾		42 ⁽¹⁾
		57	56 ⁽¹⁾		41 ⁽¹⁾
		56	55 ⁽¹⁾		40 ⁽¹⁾
		55	54 ⁽¹⁾		39 ⁽¹⁾
		54	53 ⁽¹⁾		38 ⁽¹⁾
		53	52 ⁽¹⁾		37 ⁽¹⁾
		52	51 ⁽¹⁾		36 ⁽¹⁾
		51	50 ⁽¹⁾		35 ⁽¹⁾
		50	49 ⁽¹⁾		34 ⁽¹⁾
		49	48 ⁽¹⁾		33
		48	47 ⁽¹⁾		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 ⁽¹⁾
13.4-13.7 ^(*)		2.2							10.1 ⁽¹⁾
13.3 ^(*)		2.1							9.2 ⁽¹⁾
13.2 ^(*)									8.2 ⁽¹⁾
13.0-13.1 ^(*)									7.2-7.4 ⁽¹⁾
12.2-12.5 ^(*)									6.2-6.4 ⁽¹⁾
12.0-12.1 ^(*)									5.0-5.4 ⁽¹⁾
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

Notes

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.

^* Partial support with prefix.

Bugs

Chrome feature request: Chromium issue #497522
Firefox feature request: Mozilla bug #1178765

Resources

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