CSS3 reflection

13.Jul.2010

CSS3 reflection is a nice way to get reflection effect without using JavaScript.

To use CSS3 reflection, use command:

box-reflect: <direction> <offset> <mask-box>;

Just copy/paste following snippet to use CSS3 reflection from example below:

1
2
3
4
5
6
<img src="https://stuntcoders.com/demo/css3-transitions.png"
	width="200"
	height="200"
	style="-webkit-box-reflect: right 1px
	-webkit-gradient(linear, left top, right top, from(transparent), color-stop(0.4, transparent), to(white));"
/>

Example of CSS3 reflection:

Notice:
Only problem with using this CSS3 effect is – only Chrome and Safari support it at this moment.