CSS Reflections

Method of displaying a reflection of an element

Spec	https://webkit.org/blog/182/css-reflections/
Status	Unofficial / Note

IE	Edge	Firefox	Chrome	Safari	Opera
			108 (*)
		107	107 (*)	TP (*)
		106	106 (*)	16.1 (*)
11	105 (*)	105	105 (*)	16.0 (*)	91 (*)
10	104 (*)	104	104 (*)	15.6 (*)	90 (*)
9	103 (*)	103	103 (*)	15.5 (*)	89 (*)
8	102 (*)	102	102 (*)	15.4 (*)	88 (*)
Show all
7	101 (*)	101	101 (*)	15.2-15.3 (*)	87 (*)
6	100 (*)	100	100 (*)	15.1 (*)	86 (*)
5.5	99 (*)	99	99 (*)	15 (*)	85 (*)
	98 (*)	98	98 (*)	14.1 (*)	84 (*)
	97 (*)	97	97 (*)	14 (*)	83 (*)
	96 (*)	96	96 (*)	13.1 (*)	82 (*)
	95 (*)	95	95 (*)	13 (*)	81 (*)
	94 (*)	94	94 (*)	12.1 (*)	80 (*)
	93 (*)	93	93 (*)	12 (*)	79 (*)
	92 (*)	92	92 (*)	11.1 (*)	78 (*)
	91 (*)	91	91 (*)	11 (*)	77 (*)
	90 (*)	90	90 (*)	10.1 (*)	76 (*)
	89 (*)	89	89 (*)	10 (*)	75 (*)
	88 (*)	88	88 (*)	9.1 (*)	74 (*)
	87 (*)	87	87 (*)	9 (*)	73 (*)
	86 (*)	86	86 (*)	8 (*)	72 (*)
	85 (*)	85	85 (*)	7.1 (*)	71 (*)
	84 (*)	84	84 (*)	7 (*)	70 (*)
	83 (*)	83	83 (*)	6.1 (*)	69 (*)
	81 (*)	82	81 (*)	6 (*)	68 (*)
	80 (*)	81	80 (*)	5.1 (*)	67 (*)
	79 (*)	80	79 (*)	5 (*)	66 (*)
	18	79	78 (*)	4 (*)	65 (*)
	17	78	77 (*)	3.2	64 (*)
	16	77	76 (*)	3.1	63 (*)
	15	76	75 (*)		62 (*)
	14	75	74 (*)		60 (*)
	13	74	73 (*)		58 (*)
	12	73	72 (*)		57 (*)
		72	71 (*)		56 (*)
		71	70 (*)		55 (*)
		70	69 (*)		54 (*)
		69	68 (*)		53 (*)
		68	67 (*)		52 (*)
		67	66 (*)		51 (*)
		66	65 (*)		50 (*)
		65	64 (*)		49 (*)
		64	63 (*)		48 (*)
		63	62 (*)		47 (*)
		62	61 (*)		46 (*)
		61	60 (*)		45 (*)
		60	59 (*)		44 (*)
		59	58 (*)		43 (*)
		58	57 (*)		42 (*)
		57	56 (*)		41 (*)
		56	55 (*)		40 (*)
		55	54 (*)		39 (*)
		54	53 (*)		38 (*)
		53	52 (*)		37 (*)
		52	51 (*)		36 (*)
		51	50 (*)		35 (*)
		50	49 (*)		34 (*)
		49	48 (*)		33 (*)
		48	47 (*)		32 (*)
		47	46 (*)		31 (*)
		46	45 (*)		30 (*)
		45	44 (*)		29 (*)
		44	43 (*)		28 (*)
		43	42 (*)		27 (*)
		42	41 (*)		26 (*)
		41	40 (*)		25 (*)
		40	39 (*)		24 (*)
		39	38 (*)		23 (*)
		38	37 (*)		22 (*)
		37	36 (*)		21 (*)
		36	35 (*)		20 (*)
		35	34 (*)		19 (*)
		34	33 (*)		18 (*)
		33	32 (*)		17 (*)
		32	31 (*)		16 (*)
		31	30 (*)		15 (*)
		30	29 (*)		12.1
		29	28 (*)		12
		28	27 (*)		11.6
		27	26 (*)		11.5
		26	25 (*)		11.1
		25	24 (*)		11
		24	23 (*)		10.6
		23	22 (*)		10.5
		22	21 (*)		10.0-10.1
		21	20 (*)		9.5-9.6
		20	19 (*)		9
		19	18 (*)
		18	17 (*)
		17	16 (*)
		16	15 (*)
		15	14 (*)
		14	13 (*)
		13	12 (*)
		12	11 (*)
		11	10 (*)
		10	9 (*)
		9	8 (*)
		8	7 (*)
		7	6 (*)
		6	5 (*)
		5	4 (*)
		4
		3.6
		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
16.1 (*)
16.0 (*)	all	105 (*)	10 (*)	64 (*)	105 (*)	104	11	13.4 (*)	18.0 (*)	13.1 (*)	13.18 (*)	2.5
15.6 (*)		4.4.3-4.4.4 (*)	7 (*)	12.1			10		17.0 (*)
15.5 (*)		4.4 (*)		12					16.0 (*)
15.4 (*)		4.2-4.3 (*)		11.5					15.0 (*)
Show all
15.2-15.3 (*)		4.1 (*)		11.1					14.0 (*)
15.0-15.1 (*)		4 (*)		11					13.0 (*)
14.5-14.8 (*)		3 (*)		10					12.0 (*)
14.0-14.4 (*)		2.3 (*)							11.1-11.2 (*)
13.4-13.7 (*)		2.2 (*)							10.1 (*)
13.3 (*)		2.1 (*)							9.2 (*)
13.2 (*)									8.2 (*)
13.0-13.1 (*)									7.2-7.4 (*)
12.2-12.5 (*)									6.2-6.4 (*)
12.0-12.1 (*)									5.0-5.4 (*)
11.3-11.4 (*)									4 (*)
11.0-11.2 (*)
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

Similar effect can be achieved in Firefox 4+ using the -moz-element() background property

^* Partial support with prefix.

Resources

• WebKit blog post