Blending of HTML/SVG elements

Allows blending between arbitrary SVG and HTML elements

Spec	https://www.w3.org/TR/compositing-1/#mix-blend-mode
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			103
		100	102
		99	101	TP (2)
11	99	98	100	15.4 (2)	83
10	98	97	99	15.2-15.3 (2)	82
9	97	96	98	15.1 (2)	81
8	96	95	97	15 (2)	80
Show all
7	95	94	96	14.1 (2)	79
6	94	93	95	14 (2)	78
5.5	93	92	94	13.1 (2)	77
	92	91	93	13 (2)	76
	91	90	92	12.1 (2)	75
	90	89	91	12 (2)	74
	89	88	90	11.1 (2)	73
	88	87	89	11 (2)	72
	87	86	88	10.1 (2)	71
	86	85	87	10 (2)	70
	85	84	86	9.1 (2)	69
	84	83	85	9 (2)	68
	83	82	84	8 (2)	67
	81	81	83	7.1 (2)	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 (1)		22
		38	39 (1)		21
		37	38 (1)		20
		36	37 (1)		19
		35	36 (1)		18
		34	35 (1)		17
		33	34 (1)		16
		32	33 (1)		15
		31	32 (1)		12.1
		30	31 (1)		12
		29	30 (1)		11.6
		28	29 (1)		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 (2)	all	99	10	64	100	98	11	12.12	16.0	10.4	7.12	2.5
15.2-15.3 (2)		4.4.3-4.4.4	7	12.1			10		15.0
15.0-15.1 (2)		4.4		12					14.0
14.5-14.8 (2)		4.2-4.3		11.5					13.0
Show all
14.0-14.4 (2)		4.1		11.1					12.0
13.4-13.7 (2)		4		11					11.1-11.2
13.3 (2)		3		10					10.1
13.2 (2)		2.3							9.2
13.0-13.1 (2)		2.2							8.2
12.2-12.5 (2)		2.1							7.2-7.4
12.0-12.1 (2)									6.2-6.4
11.3-11.4 (2)									5.0-5.4
11.0-11.2 (2)									4
10.3 (2)
10.0-10.2 (2)
9.3 (2)
9.0-9.2 (2)
8.1-8.4 (2)
8 (2)
7.0-7.1
6.0-6.1
5.0-5.1
4.2-4.3
4.0-4.1
3.2

Notes

1. Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags

2. Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes.

Bugs

• Firefox on OSX has a bug where content may turn entirely black

• Chrome/Opera sometimes renders mix-blend-mode incorrectly. There is a workaround though.

Resources

• codepen example
• Blog post