Skip to content
Related Articles

Related Articles

How to add image refaction using CSS ?

Improve Article
Save Article
  • Last Updated : 28 Sep, 2022
Improve Article
Save Article

In this article, we will see 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.

-webkit-box-reflect: This property is used to create 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=
    <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=
             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>
    <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=
        alt="GFG image">
    </center>
</body>
  
</html>


Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!