Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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




<!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>

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.




<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>

Complete Code: It is the combination of the above two sections of 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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :