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
			103
		100 ⁽³⁾	102
		99 ⁽³⁾	101	TP ^(*)
11	99	98 ⁽³⁾	100	15.4 ^(*)	83
10	98	97 ⁽³⁾	99	15.2-15.3 ^(*)	82
9	97	96 ⁽³⁾	98	15.1 ^(*)	81
8	96	95 ⁽³⁾	97	15 ^(*)	80
Show all
7	95	94 ⁽³⁾	96	14.1 ^(*)	79
6	94	93 ⁽³⁾	95	14 ^(*)	78
5.5	93	92 ⁽³⁾	94	13.1 ^(*)	77
	92	91 ⁽³⁾	93	13 ^(*)	76
	91	90 ⁽³⁾	92	12.1 ^(*)	75
	90	89 ⁽³⁾	91	12 ^(*)	74
	89	88 ⁽³⁾	90	11.1 ^(*)	73
	88	87 ⁽³⁾	89	11 ^(*)	72
	87	86 ⁽³⁾	88	10.1 ^(*)	71
	86	85 ⁽³⁾	87	10 ^(*)	70
	85	84 ⁽³⁾	86	9.1 ^(*)	69
	84	83 ⁽³⁾	85	9 ^(*)	68
	83	82 ⁽³⁾	84	8	67
	81	81 ⁽³⁾	83	7.1	66
	80	80 ⁽³⁾	81	7	65
	79	79 ⁽³⁾	80	6.1	64
	18 ⁽²⁾	78 ⁽³⁾	79	6	63 ⁽¹⁾
	17 ⁽²⁾	77 ⁽³⁾	78	5.1	62 ⁽¹⁾
	16	76 ⁽³⁾	77	5	60 ⁽¹⁾
	15	75 ⁽³⁾	76	4	58 ⁽¹⁾
	14	74 ⁽³⁾	75 ⁽¹⁾	3.2	57 ⁽¹⁾
	13	73 ⁽³⁾	74 ⁽¹⁾	3.1	56 ⁽¹⁾
	12	72 ⁽³⁾	73 ⁽¹⁾		55 ⁽¹⁾
		71 ⁽³⁾	72 ⁽¹⁾		54 ⁽¹⁾
		70 ⁽³⁾	71 ⁽¹⁾		53 ⁽¹⁾
		69	70 ⁽¹⁾		52 ⁽¹⁾
		68	69 ⁽¹⁾		51 ⁽¹⁾
		67	68 ⁽¹⁾		50 ⁽¹⁾
		66	67 ⁽¹⁾		49 ⁽¹⁾
		65	66 ⁽¹⁾		48 ⁽¹⁾
		64	65 ⁽¹⁾		47 ⁽¹⁾
		63	64 ⁽¹⁾		46 ⁽¹⁾
		62	63 ⁽¹⁾		45 ⁽¹⁾
		61	62 ⁽¹⁾		44 ⁽¹⁾
		60	61 ⁽¹⁾		43 ⁽¹⁾
		59	60 ⁽¹⁾		42 ⁽¹⁾
		58	59 ⁽¹⁾		41 ⁽¹⁾
		57	58 ⁽¹⁾		40 ⁽¹⁾
		56	57 ⁽¹⁾		39 ⁽¹⁾
		55	56 ⁽¹⁾		38 ⁽¹⁾
		54	55 ⁽¹⁾		37 ⁽¹⁾
		53	54 ⁽¹⁾		36 ⁽¹⁾
		52	53 ⁽¹⁾		35 ⁽¹⁾
		51	52 ⁽¹⁾		34 ⁽¹⁾
		50	51 ⁽¹⁾		33
		49	50 ⁽¹⁾		32
		48	49 ⁽¹⁾		31
		47	48 ⁽¹⁾		30
		46	47 ⁽¹⁾		29
		45	46		28
		44	45		27
		43	44		26
		42	43		25
		41	42		24
		40	41		23
		39	40		22
		38	39		21
		37	38		20
		36	37		19
		35	36		18
		34	35		17
		33	34		16
		32	33		15
		31	32		12.1
		30	31		12
		29	30		11.6
		28	29		11.5
		27	28		11.1
		26	27		11
		25	26		10.6
		24	25		10.5
		23	24		10.0-10.1
		22	23		9.5-9.6
		21	22		9
		20	21
		19	20
		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.4 ^(*)	all	99	10	64	100	98 ⁽³⁾	11	12.12	16.0	10.4 ⁽¹⁾	7.12 ⁽¹⁾	2.5
15.2-15.3 ^(*)		4.4.3-4.4.4	7	12.1			10		15.0
15.0-15.1 ^(*)		4.4		12					14.0
14.5-14.8 ^(*)		4.2-4.3		11.5					13.0
Show all
14.0-14.4 ^(*)		4.1		11.1					12.0
13.4-13.7 ^(*)		4		11					11.1-11.2 ⁽¹⁾
13.3 ^(*)		3		10					10.1 ⁽¹⁾
13.2 ^(*)		2.3							9.2 ⁽¹⁾
13.0-13.1 ^(*)		2.2							8.2 ⁽¹⁾
12.2-12.5 ^(*)		2.1							7.2-7.4 ⁽¹⁾
12.0-12.1 ^(*)									6.2-6.4 ⁽¹⁾
11.3-11.4 ^(*)									5.0-5.4 ⁽¹⁾
11.0-11.2 ^(*)									4
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

Name	Support Tables
Version
Badge
Last Updated	2022-04-11T17:49:08Z