Skip to content
Related Articles

Related Articles

How to create reflection effect using HTML and CSS ?
  • Last Updated : 10 Jul, 2020

The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we try to imitate a realistic reflection effect like it is being reflected from water.

Approach: The approach is to create a rotated string at the bottom of the original string and then changing its opacity and background to make it look like the reflection of the original string. Let us look at the implementation of the above approach.

HTML Code: In this section, “h2” tag is created with the text wrapped in it.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, 
        initial-scale=1.0" />
  
    <title>
        Text Reflection 
        using HTML and CSS
    </title>
</head>
  
<body>
    <h2 data-text="GeeksforGeeks">
        GeeksforGeeks
    </h2>
</body>
  
</html>

chevron_right


CSS Code:

  • Step 1: Apply a radial background which is lighter at the center and darker at the corners.
  • Step 2: Apply some basic styling like size, color, etc to the heading.
  • Step 3: Now use the after selector and rotate the original text on X-axis keeping the origin as bottom.
  • Step 4: Apply “webkit” property to cut the rotated text into cuts. It will make the upper
    portion of the text visible , as shown in the output image.
  • Step 5: Now apply the transparent color and decrease the opacity of the rotated text.

Note: Make sure to decrease the opacity according to your background. If you are using a darker
background, decrease the opacity by 0.1-0.2 and if you are using a lighter background then decrease it by 0.6-0.8.



filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
 body 
     {
       /* Radiel gradient defined by its center*/
        background-image: radial-gradient(#013220,#008000);
        height: 100vh;
      }
   
      h2 {
        position: absolute;
        top: 30%;
        left: 30%;
        text-transform: capitalize;
        color: white;
        font-size: 50px;
      }
      h2::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
    /* Change the position of transformed element */
        transform-origin: bottom;
    /*  Rotates around x-axis */
        transform: rotateX(180deg);
        line-height: 0.85em;
    /* linear-gradient defined by up,down,left ,right ,diagonal */
        background-image: linear-gradient(0deg, #ffffff 0, transparent 95%);
        -webkit-background-clip: text;
        color: transparent;         
        opacity: 0.7;
      }
  </style>

chevron_right


Complete Code: It is the combination of the above two sections of code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Reflection using HTML and CSS</title>
    <style>
      body 
     {
       /* Radiel gradient defined by its center*/
        background-image: radial-gradient(#013220,#008000);
        height: 100vh;
      }
   
      h2 {
        position: absolute;
        top: 30%;
        left: 30%;
        text-transform: capitalize;
        color: white;
        font-size: 50px;
      }
      h2::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
    /* Change the position of transformed element */
        transform-origin: bottom;
    /*  Rotates around x-axis */
        transform: rotateX(180deg);
        line-height: 0.85em;
    /* linear-gradient defined by up,down,left ,right ,diagonal */
        background-image: linear-gradient(0deg, #ffffff 0, transparent 95%);
        -webkit-background-clip: text;
        color: transparent;         
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <h2 data-text="GeeksforGeeks">GeeksforGeeks</h2>
  </body>
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :