CSS Image reflection

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

CSS Image reflection-properties

CSS  box-reflect property values are given below

• below
• above
• left 
• right.

Examples

See the below effect :

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

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

Gradient property

It helps us to create a fade out effect on a reflected image

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

Offset property

It helps to create a gap in an image and its reflection:

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