How to Add a Text Glow Effect with CSS

Introduction

Adding a glow effect to text in CSS can create a striking visual appearance, making the text stand out. This can be easily achieved using the text-shadow property to simulate the glow around the text.

In this tutorial, you'll learn how to create a glowing text effect using CSS by applying the text-shadow property.

Problem Statement

Create a CSS code that:

Adds a glowing effect to text using the text-shadow property.
Demonstrates how to control the color, blur, and spread of the glow.

Example:

Input: A heading element with the text "Text Glow Effect".
Output: The text appears with a glowing effect around it.

Solution Steps

Use text-shadow Property: Apply the text-shadow property to create a glowing effect around the text.
Control Glow Color and Blur: Adjust the color and blur radius to customize the glow effect.

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 Glow Effect</title>
    <style>
        /* Step 1: Add a glowing effect using text-shadow */
        .glow-text {
            font-size: 3rem;
            color: white;
            text-shadow: 
                0 0 10px rgba(255, 255, 255, 0.8), /* soft white glow */
                0 0 20px rgba(0, 255, 255, 0.8),  /* cyan glow */
                0 0 30px rgba(0, 255, 255, 0.8),  /* brighter cyan glow */
                0 0 40px rgba(0, 255, 255, 1);    /* intense cyan glow */
            font-family: Arial, sans-serif;
        }

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

    <div class="container">
        <h1 class="glow-text">Text Glow Effect</h1>
    </div>

</body>
</html>

Explanation

Step 1: Use `text-shadow` for Glowing Effect

To create a glowing effect, use the following CSS:

.glow-text {
    font-size: 3rem;
    color: white;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8), /* soft white glow */
        0 0 20px rgba(0, 255, 255, 0.8),  /* cyan glow */
        0 0 30px rgba(0, 255, 255, 0.8),  /* brighter cyan glow */
        0 0 40px rgba(0, 255, 255, 1);    /* intense cyan glow */
}

The text-shadow property defines multiple shadows that simulate the glow effect. Each shadow has different blur radii and opacity levels to create the glowing effect around the text.

Step 2: Customize the Glow Color and Intensity

You can adjust the color and intensity of the glow by changing the rgba() values and the blur radius in the text-shadow property.

Output

Conclusion

Creating a text glow effect in CSS is simple using the text-shadow property. By adjusting the shadow color, blur radius, and opacity, you can create a glowing text effect that enhances your web design and draws attention to important elements.

Java Guides

Search This Blog