CSS - Image Reflection

Quiz

An image reflection is a design technique that lets you create a copy of the image. They are nothing but the styled mirror image of the image it is applied on.

CSS provides a property box-reflect, that helps in creating an image reflection.

Possible values

The CSS property box-reflect can have the following values:

above: Sets the reflection above the image.
below: Sets the reflection below the image.
right: Sets the reflection on the right side of the image.
left: Sets the reflection on the left side of the image.
<length>: Signifies the size of the reflection of the image.
<image>: Determines the mask to be applied to the reflection of the image.

Applies to

All the HTML elements.

Syntax

-webkit-box-reflect = [ above | below | right | left ]? ? ?

Note: Use of prefix is a must with the property for browser compatability reasons. Hence instead of using this property as box-reflect, use it as -webkit-box-reflect.

CSS Image Reflection - below Value

The following example demonstrates the use of -webkit-box-reflect CSS property with the value as below, which creates the reflection of the given image below it.

<html>
<head>
<style>
   img{   
      -webkit-box-reflect: below 0px;
      max-height: 315px;
      max-width: 220px;
   }
   div{
      height: 250px;
      border: 1px solid black;
   }
</style>
</head>
<body>
   <h1>CSS Image Reflection</h1>
   <p>Image reflection can be seen below it:</p>
   <div>
      <img src="images/logo.png">
   </div>
</body>
</html>

CSS Image Reflection - above Value

The following example demonstrates the use of -webkit-box-reflect CSS property with the value as above, which creates the reflection of the given image above it.

<html>
<head>
<style>
   img {
      -webkit-box-reflect: above;
      margin-top: 80px;
   }
</style>
</head>
<body>
   <h1>CSS Image Reflection</h1>
   <p>Image reflection can be seen above it:</p>
   <img src="images/logo.png">
</body>
</html>

CSS Image Reflection - right Value

The following example demonstrates the use of -webkit-box-reflect CSS property with the value as right, which creates the reflection of the given image on the right side of it.

<html>
<head>
<style>
   img {
      -webkit-box-reflect: right;
      width: 200px;
   }
</style>
</head>
<body>
   <h1>CSS Image Reflection</h1>
   <p>Image reflection can be seen on the right side of the image:</p>
   <img src="images/logo.png">
</body>
</html>

CSS Image Reflection - left Value

The following example demonstrates the use of -webkit-box-reflect CSS property with the value as left, which creates the reflection of the given image on the left side of it.

<html>
<head>
<style>
   img {
      -webkit-box-reflect: left;
      margin-left: 2in;
      width: 200px;
   }
</style>
</head>
<body>
   <h1>CSS Image Reflection</h1>
   <p>Image reflection can be seen on the left side of the image:</p>
   <img src="images/logo.png">
</body>
</html>

CSS Image Reflection - Reflection Offset

The following example demonstrates the use of -webkit-box-reflect CSS property with an offset value in <length> unit along with a direction. Hence a reflection will be created below the image with a gap of 80px.

<html>
<head>
<style>
   img {
      -webkit-box-reflect: right 80px;
      width: 200px;
   }
</style>
</head>
<body>
   <h1>CSS Image Reflection Offset</h1>
   <p>Image reflection can be seen at the right side with an offset or gap of 80px:</p>
   <img src="images/logo.png">
</body>
</html>

CSS Image Reflection - Reflection with Gradient

The following example demonstrates the use of -webkit-box-reflect CSS property with a gradient that creates a reflection. The reflection that is seen is created using a linear-gradient().

<html>
<head>
<style>
   img {
      -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
      width: 200px;
      height: 300px;
   }
</style>
</head>
<body>
   <h1>CSS Reflection with Gradient</h1>
   <p>See the reflection with gradient:</p>
   <img src="images/tree.jpg">
</body>
</html>

CSS Image Reflection - Masking with Gradient

The following example demonstrates the use of -webkit-box-reflect CSS property along with a -webkit-gradient property, that creates a reflection. The reflection is seen below with a gap of 10px.

<html>
<head>
<style>
   img {
      -webkit-box-reflect: right 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent) , to(rgba(250, 250, 250, 0.5)));
      width: 200px;
      height: 300px;
   }
</style>
</head>
<body>
   <h1>CSS Masking Reflection with Gradient</h1>
   <p>See the masking effect created with gradient:</p>
   <img src="images/tree.jpg">
</body>
</html>

Print Page