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
			98
		95	97
		94	96	TP ⁽²⁾
11	95	93	95	15 ⁽²⁾	80
10	94	92	94	14.1 ⁽²⁾	79
9	93	91	93	14 ⁽²⁾	78
8	92	90	92	13.1 ⁽²⁾	77
Show all
7	91	89	91	13 ⁽²⁾	76
6	90	88	90	12.1 ⁽²⁾	75
5.5	89	87	89	12 ⁽²⁾	74
	88	86	88	11.1 ⁽²⁾	73
	87	85	87	11 ⁽²⁾	72
	86	84	86	10.1 ⁽²⁾	71
	85	83	85	10 ⁽²⁾	70
	84	82	84	9.1 ⁽²⁾	69
	83	81	83	9 ⁽²⁾	68
	81	80	81	8 ⁽²⁾	67
	80	79	80	7.1 ⁽²⁾	66
	79	78	79	7	65
	18	77	78	6.1	64
	17	76	77	6	63
	16	75	76	5.1	62
	15	74	75	5	60
	14	73	74	4	58
	13	72	73	3.2	57
	12	71	72	3.1	56
		70	71		55
		69	70		54
		68	69		53
		67	68		52
		66	67		51
		65	66		50
		64	65		49
		63	64		48
		62	63		47
		61	62		46
		60	61		45
		59	60		44
		58	59		43
		57	58		42
		56	57		41
		55	56		40
		54	55		39
		53	54		38
		52	53		37
		51	52		36
		50	51		35
		49	50		34
		48	49		33
		47	48		32
		46	47		31
		45	46		30
		44	45		29
		43	44		28
		42	43		27
		41	42		26
		40	41		25
		39	40 ⁽¹⁾		24
		38	39 ⁽¹⁾		23
		37	38 ⁽¹⁾		22
		36	37 ⁽¹⁾		21
		35	36 ⁽¹⁾		20
		34	35 ⁽¹⁾		19
		33	34 ⁽¹⁾		18
		32	33 ⁽¹⁾		17
		31	32 ⁽¹⁾		16
		30	31 ⁽¹⁾		15
		29	30 ⁽¹⁾		12.1
		28	29 ⁽¹⁾		12
		27	28		11.6
		26	27		11.5
		25	26		11.1
		24	25		11
		23	24		10.6
		22	23		10.5
		21	22		10.0-10.1
		20	21		9.5-9.6
		19	20		9
		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

Notes

Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags
Partial in Safari refers to not supporting the hue, saturation, color, and luminosity blend modes.

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.

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