5+ JavaScript Glow Text Effect Examples

This post contains a total of 5+ JavaScript Glow Text Effect Examples with Source Code. All these Glow Text Effects are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Glow Text Effect Examples

1. Bill Paxton Tribute Glow Text

Made by Chris. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Quantico:700");
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: RGB(24, 25, 26);
  display: flex;
  align-items: center;
  position: relative;
}
body:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://i.imgsafe.org/732a1b0d39.jpg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.15;
}

#textBox {
  max-width: 70%;
  display: block;
  height: auto;
  margin: 0 auto;
  text-align: center;
  color: whitesmoke;
  line-height: 150%;
  font-variant: small-caps;
  font-family: "Audiowide";
  font-size: calc(5px + 4vw);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
#textBox .textSec {
  margin: 0 15px 0 15px;
}
#textBox .textSec span {
  transition: all 0.1s ease;
  margin: 0.5px;
  -webkit-filter: brightness(120%);
}
</style>
</head>
<body>
  <div id="textBox">
  <div class="textSec"><span class="text">T</span><span class="text">h</span><span class="text">a</span><span class="text">t</span><span class="text">&apos;</span><span class="text">s</span></div>
  <div class="textSec"><span class="text">i</span><span class="text">t</span><span class="text">,</span></div>
  <div class="textSec"><span class="text">m</span><span class="text">a</span><span class="text">n</span><span class="text">.</span></div>
  <div class="textSec"><span class="text">G</span><span class="text">a</span><span class="text">m</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">o</span><span class="text">v</span><span class="text">e</span><span class="text">r</span><span class="text">,</span></div>
  <div class="textSec"><span class="text">m</span><span class="text">a</span><span class="text">n</span><span class="text">.</span></div>
  <div class="textSec"><span class="text">G</span><span class="text">a</span><span class="text">m</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">o</span><span class="text">v</span><span class="text">e</span><span class="text">r</span><span class="text">!</span></div>
  <div class="textSec"><span class="text">W</span><span class="text">h</span><span class="text">a</span><span class="text">t</span></div>
  <div class="textSec"><span class="text">t</span><span class="text">h</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">*</span><span class="text">*</span><span class="text">*</span><span class="text">*</span></div>
  <div class="textSec"><span class="text">a</span><span class="text">r</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">w</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">g</span><span class="text">o</span><span class="text">n</span><span class="text">n</span><span class="text">a</span></div>
  <div class="textSec"><span class="text">d</span><span class="text">o</span></div>
  <div class="textSec"><span class="text">n</span><span class="text">o</span><span class="text">w</span><span class="text">?</span></div>
  <div class="textSec"><span class="text">W</span><span class="text">h</span><span class="text">a</span><span class="text">t</span></div>
  <div class="textSec"><span class="text">a</span><span class="text">r</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">w</span><span class="text">e</span></div>
  <div class="textSec"><span class="text">g</span><span class="text">o</span><span class="text">n</span><span class="text">n</span><span class="text">a</span></div>
  <div class="textSec"><span class="text">d</span><span class="text">o</span><span class="text">?</span></div>
</div>
      <script>
var otTitle = document.getElementById("textBox"),
sSpan = document.getElementsByClassName('text').length,
letters = document.getElementsByClassName('text'),
whichLetter = 0,
trailAmount = 7;


//Used to get random colors
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

//Animate color change 
setInterval(function () {
  var rColor = getRandomColor();
  var tColor = getRandomColor();
  if (whichLetter < sSpan + trailAmount) {
    if (whichLetter > trailAmount - 1) {
      letters[whichLetter - trailAmount].style.color = 'whitesmoke';
    }
    if (whichLetter < sSpan) {
      letters[whichLetter].style.color = rColor;
      letters[whichLetter].style.textShadow = '0px 0px 10px ' + tColor;
    }
    whichLetter++;
  } else if (whichLetter > sSpan + (trailAmount - 1)) whichLetter = 0;
}, 75);
    </script>
</body>
</html>

2. Glow Text Animation

Made by Darshan Rajadhyaksha. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&amp;display=swap'> 
<style>
body {
  background:#000;
}
.text-animation {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.text-animation h1 {
  color:#111;
  font-family:"Montserrat",sans-serif;
  font-size:80px;
  letter-spacing:10px;
  text-transform:uppercase;
}
.text-animation h1 span {
  animation:glow 2.5s ease-in-out infinite;
}
@keyframes glow {
  0%,100%{
    color:#eee;
    text-shadow:0 0 10px #00acee, 0 0 50px #00acee, 0 0 80px #00acee;
  }
  10%,90%{
    color:#111;
    text-shadow:none;
  }
}
</style>
</head>
<body>
  <div class="text-animation">
  <h1>CODINGFLAG</h1>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&amp;display=swap'></script>
      <script>
document.querySelector(".text-animation h1").innerHTML = document.querySelector(".text-animation h1").textContent.replace(/./g, '<span>$&</span>');

let spans = document.querySelectorAll(".text-animation h1 span");
for (let i = 0; i < spans.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  spans[i].style.animationDelay = i * 250 + "ms";
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

3. Rainbow Glow Text Effect

Made by Erna Ayuning Nareswari. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{  position:relative; background:url(https://3.bp.blogspot.com/-e7RZaDl68Gw/ToFyangs_EI/AAAAAAAAAxQ/nYAi2RJhJas/s000/botmen2.png)repeat;  font-family:"Snowburst One";  font-size:15px;  line-height:1;
text-align:center;color:#e8e2d6;letter-spacing:1px}


a:link, a:visited {   color:#e50099;cursor:url(http://media.tumblr.com/tumblr_lpyq1zoQPK1qcn2vb.gif), url(http://media.tumblr.com/tumblr_lpyq1zoQPK1qcn2vb.gif), auto; text-decoration:none}

a:hover{ text-decoration: none;cursor:url(http://static.tumblr.com/xjqjg7j/BPsmxtr7z/10.gif), url(http://static.tumblr.com/xjqjg7j/BPsmxtr7z/10.gif), auto;}

h1{
font-size:28px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FC0));
background-image: -webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#0F7,#FFA400);
 text-transform:uppercase;
 font-family:Galindo;
}
h2{ font-size:18px; color:#ffffff; text-shadow:0 0 10px #937acc;font-family:Galindo;
h3{ font-size:22px;font-family:Galindo;
color:#ffffff;}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Galindo|Snowburst+One" rel="stylesheet">
<h1 style="margin-top:20px;">ASH PRINCESS KAWAII</h1>
<h2>Rainbow Glow Text Effect</h2>
<h3><span id="rainbow">Erna Ayuning Nareswari</span></h3>
      <script>
function addLoadEvent(e) {var t = window.onload;if (typeof t != "function") window.onload = e;else window.onload = function () {if (t) t();e();};}function regenbogen() {if (document.getElementById) {var e, t;rainbow = document.getElementById("rainbow");raintxt = rainbow.firstChild.nodeValue;while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);for (e = 0; e < raintxt.length; e++) {t = document.createElement("span");t.setAttribute("id", "rain" + e);t.appendChild(document.createTextNode(raintxt.charAt(e)));if (alink) {t.style.cursor = "pointer";t.onclick = function () {top.location.href = alink;};}rainbow.appendChild(t);}rainbow = setInterval("raining()", speed);}}function raining() {var e, t;for (e = 0; e < raintxt.length; e++) {t = raincol[(e + raincnt) % raincol.length];document.getElementById("rain" + e).style.color = t;if (glow) document.getElementById("rain" + e).style.textShadow = t + " 0px 0px " + glow + "px";}raincnt++;}var speed = 100;var glow = 5;var raincol = new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055");var alink = "http://http://ashprincesskawaii.blogspot.co.id";var rainbow,raintxt,raincnt = 0;addLoadEvent(regenbogen);
    </script>
</body>
</html>

4. Rainbow

Made by Ana Arezo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

body{
	background-color:#7bbaee;
	background-image: url(http://www.publicdomainpictures.net/pictures/170000/velka/faded-clouds-background.jpg);
	background-size: cover;
}

.circle-rainbow{
	width:400px;
	height:400px;
	margin:0 auto;
	border-bottom:0;
	border-radius: 100% 100% 100% 100%;
	-moz-border-radius: 100% 100% 100% 100%;
	-webkit-border-radius: 100% 100% 100% 100%;
	border: 1px solid transparent;
	
	/*box-shadow: 5px 15px 15px rgb(255,0,72);
	transition: opacity 0.3s ease-in-out;*/
	/*-webkit-box-shadow: 0px 0px 37px 5px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 37px 5px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 37px 5px rgba(0,0,0,0.75);*/
	box-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #ff0048, 
					 0 0 130px #ff0048, 0 0 40px #ff0048, 
					 0 0 55px #ff0048, 0 0 75px #ff0048;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.circle-rainbow.brilliant{
	box-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #5ca1c4, 
					 0 0 130px #ff0048, 0 0 40px #ff0048, 
					 0 0 55px #ff0048, 0 0 75px #ff0048;
}
.rainbow{
	font-family: 'Dancing Script', cursive;
	font-size:70pt;
	color:#fff;
	margin: 0 auto;
	position: relative;
}

.rainbow-content{
	margin:1em 0 1.5em 0.7em;
}

.rainbow-content label.red,
.rainbow-content label.orange,
.rainbow-content label.yellow,
.rainbow-content label.green,
.rainbow-content label.blue,
.rainbow-content label.purple,
.rainbow-content label.lilac{
	width:auto;
	float:left;
	text-align:center;
}

.rainbow label.red{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #ff0048, 
					 0 0 130px #ff0048, 0 0 40px #ff0048, 
					 0 0 55px #ff0048, 0 0 75px #ff0048;
}
.rainbow-content label.orange{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #ff7400, 
					 0 0 130px #ff7400, 0 0 40px #ff7400, 
					 0 0 55px #ff7400, 0 0 75px #ff7400;
}
.rainbow-content label.yellow{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #ffde00, 
					 0 0 130px #ffde00, 0 0 40px #ffde00, 
					 0 0 55px #ffde00, 0 0 75px #ffde00;
}
.rainbow-content label.green{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #04fc4f, 
					 0 0 130px #04fc4f, 0 0 40px #04fc4f, 
					 0 0 55px #04fc4f, 0 0 75px #04fc4f;
}
.rainbow-content label.blue{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #048bfc, 
					 0 0 130px #048bfc, 0 0 40px #048bfc, 
					 0 0 55px #048bfc, 0 0 75px #048bfc;
}
.rainbow-content label.purple{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #9b04fc, 
					 0 0 130px #9b04fc, 0 0 40px #9b04fc, 
					 0 0 55px #9b04fc, 0 0 75px #9b04fc;
}
.rainbow-content label.lilac{
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #ff0080, 
					 0 0 130px #ff0080, 0 0 40px #ff0080, 
					 0 0 55px #ff0080, 0 0 75px #ff0080;
}
</style>
</head>
<body>
  <div class="circle-rainbow">
	<!-- Text -->
	<div class="rainbow">
		<div class="rainbow-content">
			<label class="red">R</label>
			<label class="orange">a</label>
			<label class="yellow">i</label>
			<label class="green">n</label>
			<label class="blue">b</label>
			<label class="purple">o</label>
			<label class="lilac">w</label>
		</div>
	</div>
	<!-- End Text -->
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script id="rendered-js" >
setInterval('$(".circle-rainbow").toggleClass("brilliant");', 800);

setInterval('$(".circle-rainbow").toggleClass("brillianter");', 400);
    </script>
</body>
</html>

5. Glow Text

Made by Truman Heberle. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
body {
  background: radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, radial-gradient(hsl(0, 100%, 20%) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsl(0, 0%, 0%) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background-color: #300;
  background-size: 100px 100px;
}
@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
#form {
  color: white;
  position: relative;
  text-align: center;
  font-family: 'Electrolize';
  font-weight: bold;
}
#input {
  position: relative;
  text-align: center;
  font-family: 'Electrolize';
  font-weight: bold;
}
#text {
  color: white;
  position: relative;
  margin-top: 10px;
  height: 200px;
  width: 100%;
  font-size: 200px;
  text-align: center;
  font-family: 'Electrolize';
  font-weight: bold;
  animation: sparkle 3s infinite;
}
@keyframes sparkle {
  0% {
    text-shadow: 0 0 30px #FFF000;
  }
  40% {
    text-shadow: 0 0 50px #FFF000;
  }
  50% {
    text-shadow: 0 0 30px #FFF000;
  }
  60% {
    text-shadow: 0 0 50px #FFF000;
  }
  100% {
    text-shadow: 0 0 30px #FFF000;
  }
}
</style>
</head>
<body>
  <form id='form'>
  Enter Phrase<br>
  <input id='input' type="text" name="firstname"><br>
</form>
<div id='text'>Example Text</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
      <script>
var input = document.getElementById('input');
var text = document.getElementById('text');
var form = document.getElementById('form');
var width = $(window).width();
$("input").keypress(function (event) {
  if (event.which == 13) {
    event.preventDefault();
    word = input.value;
    text.innerHTML = word.toString();
    form.reset();
    animate('#text');
  }
});
function animate(element) {
  $(element).animate({
    left: -width,
    color: '#000000' },
  0);
  $(element).animate({
    left: 0,
    color: '#f8f8ff' },
  1000);
}
    </script>
</body>
</html>

6. Fluorescent Adolescent

Made by Ana Arezo. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Audiowide');

body{
	background-color:#000;	
}

.middle{
	font-family: 'Audiowide', cursive;
	width: 80%;
	margin: 0 auto;
}

.middle label.neon{
	margin-top: 10%;
	width:100%;
	float:left;
	text-align:center;
	padding:40pt 0;
	font-size:40pt;
	color: #fff;
	text-shadow: 0 0 15px #fff, 
					 0 0 110px #fff, 0 0 120px #ff0080, 
					 0 0 130px #ff0080, 0 0 40px #ff0080, 
					 0 0 55px #ff0080, 0 0 75px #ff0080;
}

.middle label.brilliant {
	color: #000;
	text-shadow: 0 0 15px #000, 
					 0 0 110px #000, 0 0 120px #2abf79, 
					 0 0 130px #2abf79, 0 0 40px #2abf79, 
					 0 0 55px #2abf79, 0 0 75px #2abf79;
}

.middle label.brillianter {
	color: #000;
	text-shadow: 0 0 15px #000, 
					 0 0 110px #000, 0 0 120px red, 
					 0 0 130px red, 0 0 40px red, 
					 0 0 55px red, 0 0 75px red;
}
</style>
</head>
<body>
  <div class="middle">
  <label class="neon">Glow Text</label>
  <!--label.neon Testes-->
  <!--i.fa.fa-moon-o-->
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://use.fontawesome.com/84011367c2.js'></script>
      <script>
setInterval('$(".neon").toggleClass("brilliant");', 800);

setInterval('$(".neon").toggleClass("brillianter");', 400);
    </script>
</body>
</html>