In this tutorial we will see how to make a CSS Text Reflection with pure. Simple HTML and CSS is used for this purpose, complete code is given.
Table of Contents
HTML Code
Take a look at the HTML code given below.
<!DOCTYPE html>
<html>
<title>Css Text Reflection</title>
<link rel="Stylesheet" type="text/css" href="style.css">
<body>
<h1 data-text="Reflection">Reflection</h1>
</body>
</html>
CSS Code
CSS code is given below.
<style>
body{
margin: 0;
padding: 0;
background: radial-gradient(#03a9f4, #004b6d);
height: 100vh;
}
h1{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Verdana;
color: #fff;
text-transform: uppercase;
font-size: 5em;
}
h1:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
transform-origin: bottom;
transform: rotateX(180deg);
line-height: 0.96em;
background: linear-gradient(0deg, #fff 0,transparent 80%);
-webkit-background-clip: text;
color: transparent;
opacity: 0.5;
}
</style>
Video Tutorial
Watch our video tutorial on How To Create CSS Text Reflection Effect.