How to add image refaction using CSS ?
Last Updated :
23 Jul, 2025
This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element.
The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mirror-like reflection below or above an element., and box-reflect property is nonstandard property so we use -webkit-box-reflect as a prefix.
-webkit-box-reflect: This property creates an image reflected in the below, above, left, or right position.
Syntax:
-webkit-box-reflect: below | above | left | right;
Example 1: In the below code, we will make use of the above syntax to add reflection.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
h1 {
color:green;
}
img {
-webkit-box-reflect:right;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
alt="GFG image">
</center>
</body>
</html>
Output:
Example 2: In the below code, we will make use of the above syntax to add reflection.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
h1 {
color:green;
}
img {
-webkit-box-reflect: below;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"
alt="GFG image">
</center>
</body>
</html>
Output:
