CSS Cross-Fade Function

Image function to create a "crossfade" between images. This allows one image to transition (fade) into another based on a percentage value.

Spec	https://drafts.csswg.org/css-images-4/#cross-fade-function
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

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	all	94 ^(*)	10	64 ^(*)	94 ^(*)	92	11	12.12 ^(*)	15.0 ^(*)	10.4 ^(*)	7.12 ^(*)	2.5
14.5-14.8		4.4.3-4.4.4 ^(*)	7	12.1			10		14.0 ^(*)
14.0-14.4		4.4 ^(*)		12					13.0 ^(*)
13.4-13.7		4.2-4.3		11.5					12.0 ^(*)
Show all
13.3		4.1		11.1					11.1-11.2 ^(*)
13.2		4		11					10.1 ^(*)
13.0-13.1		3		10					9.2 ^(*)
12.2-12.5		2.3							8.2 ^(*)
12.0-12.1		2.2							7.2-7.4 ^(*)
11.3-11.4		2.1							6.2-6.4 ^(*)
11.0-11.2									5.0-5.4 ^(*)
10.3									4 ^(*)
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

^* Partial support with prefix.

Resources

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