CSS Filter Effects

Method of applying filter effects using the `filter` property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.

W3C Working Draft: https://www.w3.org/TR/filter-effects-1/

Usage: 97.5% + 0.06% = 97.6%

Support summary

IE: Not supported
Edge: 79, partial since 13, available but disabled by default since 12, notes for version 12₂, notes for version 13₄
Firefox: 35, partial since 3.6, available but disabled by default since 34, notes for version 3.6₃, notes for version 34₁
Chrome: 53, prefixed since 18
Safari: 9.1, prefixed since 6
Opera: 40, prefixed since 15
Safari on iOS: 9.3, prefixed since 6.0-6.1
Opera Mini: Not supported
Android Browser: 124, prefixed since 4.4
Blackberry Browser: prefixed since 10
Opera Mobile: 80
Chrome for Android: 124
Firefox for Android: 125
IE Mobile: Not supported
UC Browser for Android: 15.5
Samsung Internet: 7.2-7.4, prefixed since 4
QQ Browser: 14.9
Baidu Browser: 13.52
KaiOS Browser: 2.5

Notes

Note that this property is significantly different from and incompatible with Microsoft's older "filter" property.

Supported in Firefox under the `layout.css.filters.enabled` flag. ↑
Supported in MS Edge under the "Enable CSS filter property" flag. ↑
Partial support in Firefox before version 34 only implemented the url() function of the filter property ↑
Partial support refers to supporting filter functions, but not the `url` function. ↑

Full support table

IE

5.5	6	7	8	9	10	11
n	n	n	n	n	n	n

Edge

12	13	14	15	16	17	18	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124
n,d	a	a	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Firefox

2	3	3.5	3.6	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128
n	n	n	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a,d	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Chrome

4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
n	n	n	n	n	n	n	n	n	n	n	n	n	n	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari

3.1	3.2	4	5	5.1	6	6.1	7	7.1	8	9	9.1	10	10.1	11	11.1	12	12.1	13	13.1	14	14.1	15	15.1	15.2-15.3	15.4	15.5	15.6	16.0	16.1	16.2	16.3	16.4	16.5	16.6	17.0	17.1	17.2	17.3	17.4	17.5	TP
n	n	n	n	n	y,x	y,x	y,x	y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera

9	9.5-9.6	10.0-10.1	10.5	10.6	11	11.1	11.5	11.6	12	12.1	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	60	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109
n	n	n	n	n	n	n	n	n	n	n	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari on iOS

3.2	4.0-4.1	4.2-4.3	5.0-5.1	6.0-6.1	7.0-7.1	8	8.1-8.4	9.0-9.2	9.3	10.0-10.2	10.3	11.0-11.2	11.3-11.4	12.0-12.1	12.2-12.5	13.0-13.1	13.2	13.3	13.4-13.7	14.0-14.4	14.5-14.8	15.0-15.1	15.2-15.3	15.4	15.5	15.6-15.8	16.0	16.1	16.2	16.3	16.4	16.5	16.6-16.7	17.0	17.1	17.2	17.3	17.4	17.5
n	n	n	n	y,x	y,x	y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera Mini

all
n

Android Browser

2.1	2.2	2.3	3	4	4.1	4.2-4.3	4.4	4.4.3-4.4.4	124
n	n	n	n	n	n	n	y,x	y,x	y

Blackberry Browser

7	10
n	y,x

Opera Mobile

10	11	11.1	11.5	12	12.1	80
n	n	n	n	n	n	y

Chrome for Android

124
y

Firefox for Android

125
y

IE Mobile

10	11
n	n

UC Browser for Android

15.5
y

Samsung Internet

4	5.0-5.4	6.2-6.4	7.2-7.4	8.2	9.2	10.1	11.1-11.2	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20	21	22	23	24
y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.5	3.0-3.1
y	y

y = supported
a = partially supported, see notes
x = supported with a prefix, e.g. moz, webkit
p = supported with a polyfill
d = available but disabled by default; the feature need to be enabled in about:config, chrome://flags, etc.
n = not supported
u = unknown/untested

Back to list