How to create reflection effect using HTML and CSS ?

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.
<!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 upperportion 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 darkerbackground, 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:
CSS-Selectors
CSS
HTML
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type