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
			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

^* Partial support with prefix.

Resources

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

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