View Categories

CSS Image Reflection

< 1 min read

In this chapter you will learn how to reflect an image.

SS Image Reflections #

The box-reflect property is used to create an image reflection.

The value of the box-reflect property can be: belowaboveleft , or right.


  #

Browser Support #

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property Chrome Internet explorer Mozila Firefox Safari Opera
box-reflect 4.0 -webkit- 79.0 -webkit- Not supported 4.0 -webkit- 15.0 -webkit-

Example #

Here we want the reflection below the image:

img { -webkit-box-reflect: below; }

Example #

Here we want the reflection to the right of the image:

img { -webkit-box-reflect: right; }

CSS Reflection Offset #

To specify the gap between the image and the reflection, add the size of the gap to the box-reflect property.

Example #

Here we want the reflection below the image, with a 20px offset:

img { -webkit-box-reflect: below 20px; }

CSS Reflection With Gradient #

We can also create a fade-out effect on the reflection.

Example #

Create a fade-out effect on the reflection:

img { -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4)); }

Powered by BetterDocs

Leave a Reply