
Demo:
To create the CSS Mirror/ Reflection Text Effect follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
Step1.
Add HTML
<div class="mirror-text">MIRROR
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Style the text and create the mirror effect:
.mirror-text {
position: relative;
font-size:120px;
font-weight: 900;
font-family: arial;
color: #4895ef;
}
.mirror-text:before {
content:"MIRROR";
position: absolute;
top:85px;
transform: rotate(180deg) scaleX(-1);
opacity:0.5;
}
.mirror-text:after {
content:"";
position: absolute;
left:0;
width:850px;
height:100px;
top:105px;
background: linear-gradient(180deg, rgba(255,255,255,0) 24%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,1) 100%);
}
Add the CSS @media rule to display the effect properly on smaller screens:
@media only screen and (max-width: 600px) {
.mirror-text {
font-size: 80px;
}
.mirror-text:before {
top:60px;
}
.mirror-text:after {
top:55px;
}
}
Watch also the video tutorial:
Enjoy coding!
Read also: