How to Apply Masked Text Effects with HTML and CSS

Introduction

A masked text effect allows you to "mask" text with an image or gradient, making only the text visible while hiding the rest of the image or background. This effect can be achieved using the background-clip and mask-image properties in CSS, providing a visually appealing design element.

In this tutorial, you'll learn how to create a masked text effect using HTML and CSS.

Problem Statement

Create a CSS code that:

Applies a masked effect to text using an image or gradient background.
Demonstrates how to clip the background to the text and make the rest of the background transparent.

Example:

Input: A heading element with the text "Masked Text Effect".
Output: The text appears with an image or gradient background applied only to the text, creating a masked effect.

Solution Steps

Use background-clip for Masked Effect: Apply the background-clip property to clip a background to the text.
Apply a Gradient or Image Background: Use background-image to apply a gradient or image, and clip it to the text.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masked Text Effect</title>
    <style>
        /* Step 1: Apply gradient background and clip it to text */
        .masked-text {
            font-size: 4rem;
            font-weight: bold;
            background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient background */
            -webkit-background-clip: text; /* Clip background to text */
            color: transparent; /* Make the text itself transparent */
            text-align: center;
            font-family: Arial, sans-serif;
        }

        /* Alternative Step: Apply an image background and clip it to text */
        .masked-image-text {
            font-size: 4rem;
            font-weight: bold;
            background: url('https://via.placeholder.com/600x400') no-repeat center;
            background-size: cover;
            -webkit-background-clip: text;
            color: transparent;
            text-align: center;
            font-family: Arial, sans-serif;
        }

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

    <div class="container">
        <h1 class="masked-text">Masked Gradient Text</h1>
        <h1 class="masked-image-text">Masked Image Text</h1>
    </div>

</body>
</html>

Explanation

Step 1: Use `background-clip` for Masked Effect

To apply a masked effect using a gradient, use the following CSS:
```
.masked-text {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    color: transparent;
}
```
- The background-clip: text property clips the background so that only the text is filled with the gradient.
- The color: transparent property ensures that the actual text color is not visible, allowing the background to be displayed through the text.

Step 2: Apply a Gradient or Image Background

You can replace the gradient with an image by using the background-image property:

.masked-image-text {
    background: url('https://via.placeholder.com/600x400') no-repeat center;
    background-size: cover;
    -webkit-background-clip: text;
    color: transparent;
}

This applies an image background to the text and clips it to make the image visible only inside the text.

Step 3: Center the Text

Use text-align: center to center the text on the page and add margin for spacing:
```
.container {
    text-align: center;
    margin-top: 100px;
}
```

Output

How to Apply Masked Text Effects with HTML and CSS

Conclusion

Creating a masked text effect with CSS is simple using background-clip and background-image or background-gradient. This effect allows you to add beautiful backgrounds to text, giving your design a unique and visually appealing look.

Java Guides

Search This Blog