BG Pattern

How to create a glowing neon text effect using HTML & CSS? Here we have Solution for Neon Text Effect with Animated CSS.

Neon Effect is a glowing text in the dark background that creates the neon effect.  I am sharing glowing Neon Text Effect With Animation using HTML and pure CSS.

Glowing Neon Animated Text Effect Source Code

Creating this CSS Neon Text Effect is used the color combination in CSS text-shadow property. I am creating three demos for glowing neon animated text.

Demo 1

HTML part for demo 1

<section id="content1">
    <div class="container-fluid">
        <div class="row content1">
            <div class="col-12">
            	<p>Demo : 1</p>
            	<p>How To Create a Glowing Neon Text</p>
            	<h2>Neon Text</h2>
                <p>CSS Tutorial for <span>Neon Text</span> and <span>Glowing Text</span> Animation</p>
                <div class="btn btn-warning"><a href="#">Download CSS Tutorial</a></div>
            </div>                 
        </div>
    </div>
</section>

CSS part that create text glowing effect for demo 1

#content1{position: relative;height: 100vh;background:#081021;}
.content1{top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;text-align: center;}
.content1 h2 {font-size: 80px;text-align: center;color: #fff;text-transform:uppercase;animation: glow 1s ease-in-out infinite alternate;letter-spacing:3px;font-weight: 900;}
.content1 p{color: #ececec;margin: 0;font-size: 18px;font-weight: 900;letter-spacing: 1px;padding: 15px 0;}
.content1 p span{text-decoration:underline;}
.content1 .btn{margin-top: 10px;}
.content1 .btn a{color: #000;}

Animate text using @key-frame animation for demo 1

@keyframes glow {from {text-shadow: 0 0 5px #fff, 0 0 10px #FDC500, 0 0 30px #FDC500, 0 0 10px #FDC500, 0 0 10px #FDC500, 0 0 10px #26B19A, 0 0 10px #26B19A, 0 0 10px #FF0004, 0 0 10px #FF0004;}to {text-shadow: 0 0 10px #fff, 0 0 20px #0A5198,0 0 15px #0A5198, 0 0 10px #0A5198, 0 0 10px #0A5198, 0 0 15px #0A5198, 0 0 10px #FF0004, 0 0 10px #FF0004;}}

Demo 2

HTML part for demo 2

<section id="content2">
    <div class="container-fluid">
        <div class="row content2">
            <div class="col-12">
            	<p>Demo : 2</p>
            	<p>CSS Neon Text Effect In HTML with Animation</p>
            	<h2>Neon Text</h2>
                <p>Pure <span>CSS</span> <span>HTML</span> Neon Text and Glowing Text Buzz Animation</p>
                <div class="btn btn-warning"><a href="#">Download CSS Tutorial</a></div>
            </div>                
        </div>
    </div>
</section>

CSS part that create text glowing effect for demo 2

#content2{position: relative;height: 100vh;background:#0c143a;}
.content2{top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;text-align: center;}
.content2 h2 {font-size: 80px;text-align: center;color: #fff;text-transform:uppercase;letter-spacing:3px;text-shadow: 0 0 0 transparent, 0 0 10px #2695ff, 0 0 20px rgba(38, 149, 255, 0.6), 0 0 40px #2695ff, 0 0 100px #2695ff, 0 0 200px #2695ff, 0 0 300px #2695ff, 0 0 500px #2695ff;-webkit-animation: buzzer 0.01s infinite alternate;animation: buzzer 0.01s infinite alternate;font-weight: 900;}
.content2 p{color: #ececec;margin: 0;font-size: 18px;font-weight: 900;letter-spacing: 1px;padding: 15px 0;}
.content2 p span{text-decoration:underline;}
.content2 .btn{margin-top: 10px;}
.content2 .btn a{color: #000;}

Animate text using @key-frame animation for demo 2

@-webkit-keyframes buzzer {70% {opacity: 0.70;}}
@keyframes buzzer {70% {opacity: 0.70;}}

Demo 3

HTML part for demo 3

<section id="content3">
    <div class="container-fluid">
        <div class="row content3">
            <div class="col-12">
            	<p>Demo : 3</p>
            	<p>Blink Neon Text Effect In HTML with CSS Animation</p>
            	<h2>Neon Text</h2>
                <p>Pure <span>CSS</span> <span>HTML</span> Neon Text and Glowing Text <span>Blink</span> Animation</p>
                <div class="btn btn-warning"><a href="#">Download CSS Tutorial</a></div>
            </div>                
        </div>
    </div>
</section>

CSS part that create text glowing effect for demo 3

#content3{position: relative;height: 100vh;background:#171717;}
.content3{top: 50%;left: 50%;transform: translate(-50%,-50%);position: absolute;text-align: center;}
.content3 h2 {font-size: 80px;text-align: center;text-transform:uppercase;letter-spacing:3px;color: #ffd9e2;text-shadow: 0 0 0 transparent, 0 0 10px #ff003c, 0 0 20px rgba(255, 0, 60, 0.5), 0 0 40px #ff003c, 0 0 100px #ff003c, 0 0 200px #ff003c, 0 0 300px #ff003c, 0 0 500px #ff003c, 0 0 1000px #ff003c;-webkit-animation: blinker 3s infinite alternate;animation: blinker 3s infinite alternate;font-weight: 900;}
.content3 p{color: #ececec;margin: 0;font-size: 18px;font-weight: 900;letter-spacing: 1px;padding: 15px 0;}
.content3 p span{text-decoration:underline;}
.content3 .btn{margin-top: 10px;}
.content3 .btn a{color: #000;}

Animate text using @key-frame animation for demo 3

@-webkit-keyframes blinker {50% {opacity: 1;}52% {opacity: 0.8;}53% {opacity: 1;}55% {opacity: 0.2;}56% {opacity: 1;}}
@keyframes blinker {50% {opacity: 1;}52% {opacity: 0.8;}53% {opacity: 1;}55% {opacity: 0.2;}56% {opacity: 1;}} 

Result

Animated Neon text effect

Download source code