How to Create a Text Reflection Effect with CSS

Introduction

A text reflection effect in CSS mimics the look of a reflective surface beneath the text, similar to what you'd see in glass or water. This effect can be created using the text-shadow property or more advanced CSS techniques with transform and opacity.

In this tutorial, you'll learn how to create a text reflection effect using CSS by applying a gradient mask and manipulating the text's transform property.

Problem Statement

Create a CSS code that:

Adds a reflection effect to text using transform, opacity, and a gradient mask.
Demonstrates how to control the reflection length and transparency.

Example:

Input: A heading element with the text "Text Reflection Effect".
Output: The text appears with a reflective mirror image beneath it.

Solution Steps

Use transform for Reflection: Apply transform: scaleY(-1) to flip the text vertically for the reflection.
Control Reflection with opacity and mask-image: Apply a gradient to simulate the fading effect of the reflection.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Reflection Effect</title>
    <style>
        /* Step 1: Define main text style */
        .reflected-text {
            font-size: 4rem;
            font-family: Arial, sans-serif;
            color: #3498db;
            text-align: center;
            position: relative; /* Position for reflection */
        }

        /* Step 2: Create the reflection */
        .reflected-text::after {
            content: attr(data-text); /* Duplicate the text */
            position: absolute;
            top: 100%; /* Position reflection below the original text */
            left: 0;
            right: 0;
            transform: scaleY(-1); /* Flip text vertically */
            opacity: 0.5; /* Make reflection semi-transparent */
            color: #3498db; /* Same color as the original text */
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /* Gradient for fade effect */
        }

        /* Center the container for better presentation */
        .container {
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="reflected-text" data-text="Text Reflection Effect">Text Reflection Effect</h1>
    </div>

</body>
</html>

Output

Explanation

Step 1: Use `transform: scaleY(-1)` for Reflection

The text reflection is created by flipping the text vertically using transform: scaleY(-1) in the ::after pseudo-element:
```
.reflected-text::after {
    content: attr(data-text);
    transform: scaleY(-1);
}
```
- The content: attr(data-text) duplicates the text from the original element.
- The transform: scaleY(-1) flips the text vertically to create the reflection effect.

Step 2: Control Reflection with `opacity` and `mask-image`

The reflection is made semi-transparent using opacity: 0.5, and a fading effect is added using mask-image with a gradient:
```
.reflected-text::after {
    opacity: 0.5;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
```
- The gradient fades the reflection from fully visible at the top (rgba(0, 0, 0, 1)) to completely transparent at the bottom (rgba(0, 0, 0, 0)).

Step 3: Position the Reflection

The reflection is positioned directly below the original text using position: absolute and top: 100%:
```
.reflected-text::after {
    position: absolute;
    top: 100%;
}
```

Step 4: Center the Text

The container is centered using text-align: center for a balanced layout:
```
.container {
    text-align: center;
    margin-top: 100px;
}
```

Conclusion

Creating a text reflection effect in CSS is simple using transform to flip the text, opacity to control transparency, and a gradient mask to simulate the fading reflection. This technique adds a professional and sleek visual effect to your text, making it stand out on your web page.

Java Guides

Search This Blog