CSS Image Reflection

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

The box-reflect property creates an image reflection.

The value of the box-reflect property can be below, above, left , or right.

HTML

				
					<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>
<img decoding="async" src="tree.png">

CSS

				
					img {
  -webkit-box-reflect: below;
}
or 
img {
  -webkit-box-reflect: above;
}
or 
img {
  -webkit-box-reflect: left;
}
or 
img {
  -webkit-box-reflect: right;
}

Output