CSS3 Image Reflections

Kind of a cool effect. Here’s an example:

To get the image reflect on the bottom, I used the following CSS:

-webkit-box-reflect: below 5px -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(transparent),
  color-stop(0.75, transparent),
  to(rgba(255,255,255,0.3))
);

Here’s some other options:

Basic

-webkit-box-reflect: below;

Offset

-webkit-box-reflect: below 5px;

Masking with Gradient

-webkit-box-reflect: below 5px -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(transparent), to(white)
);

Shortening Reflection

-webkit-box-reflect: below 5px -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(transparent),
  color-stop(50%, transparent), to(white)
);

Reducing the Reflection’s Opacity

-webkit-box-reflect: below 5px -webkit-gradient(
  linear,
  left top,
  left bottom,
  from(transparent),
  color-stop(50%, transparent),
  to(rgba(255,255,255,0.2))
);