rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Create an easy box reflect with webkit

Posted on Wednesday May 16, 2012 by Eric Potvin

Image reflection is a cool effect when you want to display images. Before CSS3, this was a painful process to do, specially if you have lots of image to show. This is now a just memories from the past.

Webkit now introduce a new feature call -webkit-box-reflect. This new CSS code will automatically creates an image reflection. The negative point is, only Webkit supports it.

CSS Code

div#boxReflect {
  height: 650px;
}
div#boxReflect img {
  -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}

HTML

<div id="boxReflect">
  <img src="http://www.bookofzeus.com/download/tron-legacy-racing-poster.jpg" width="300" height="429" alt="Tron Poster CSS3 Box Reflect" />
</div>
Demo
Tron Poster CSS3 Box Reflect