Article Categories

Selected Reading

How to create a glowing text with CSS?

CSS Web Development Front End Technology

To create a glowing text with CSS, use the animation property combined with text-shadow. The glowing effect is achieved by animating between different text-shadow values using @keyframes.

Syntax

.glowing-text {
    animation: animation-name duration timing-function iteration-count direction;
    text-shadow: multiple shadow values;
}

@keyframes animation-name {
    from { text-shadow: initial values; }
    to { text-shadow: final values; }
}

Basic Glowing Text Example

Here's a simple example that creates a glowing text effect −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }
    
    .glowing {
        font-size: 60px;
        color: #fff;
        animation: glow 2s ease-in-out infinite alternate;
    }
    
    @keyframes glow {
        from {
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00f, 0 0 40px #00f;
        }
        to {
            text-shadow: 0 0 20px #fff, 0 0 30px #00f, 0 0 40px #00f, 0 0 50px #00f, 0 0 60px #00f;
        }
    }
</style>
</head>
<body>
    <h1 class="glowing">GLOWING TEXT</h1>
</body>
</html>

A blue glowing text "GLOWING TEXT" appears on a black background, with the glow effect pulsating smoothly.

Advanced Multi-Color Glow

This example creates a more vibrant multi-colored glowing effect −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: 'Courier New', monospace;
    }
    
    .rainbow-glow {
        font-size: 50px;
        color: #fff;
        text-align: center;
        animation: rainbowGlow 3s ease-in-out infinite alternate;
    }
    
    @keyframes rainbowGlow {
        0% {
            text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000;
        }
        33% {
            text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
        }
        66% {
            text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff;
        }
        100% {
            text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
        }
    }
</style>
</head>
<body>
    <div class="rainbow-glow">RAINBOW GLOW</div>
</body>
</html>

Text that cycles through different colored glows: red, green, blue, and magenta, creating a rainbow effect.

Key Properties Explained

Property	Purpose
`text-shadow`	Creates the glowing effect with multiple shadow layers
`animation`	Controls the timing and behavior of the glow animation
`@keyframes`	Defines the animation steps and shadow transitions
`infinite alternate`	Makes the animation repeat back and forth continuously

Conclusion

Creating glowing text in CSS requires combining text-shadow with @keyframes animation. The multiple shadow layers create depth, while the animation provides the pulsating glow effect that makes text stand out dramatically.

AmitDiwan

Updated on: 2026-03-15T14:54:53+05:30

430 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next