12+ CSS Glow Text Effect Examples

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

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

Related Posts

CSS Glow Text Effect Examples

1. Glowing text

Made by Bennett Feely. 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 'https://fonts.googleapis.com/css?family=Permanent+Marker';
body {
  font: 15vw/1 Permanent Marker;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  background: #111;
  color: snow;
}

span {
  -webkit-animation: glow 2s ease-in-out both infinite;
          animation: glow 2s ease-in-out both infinite;
}
span:nth-child(1) {
  -webkit-animation-delay: -0.2857142857s;
          animation-delay: -0.2857142857s;
}
span:nth-child(2) {
  -webkit-animation-delay: -0.5714285714s;
          animation-delay: -0.5714285714s;
}
span:nth-child(3) {
  -webkit-animation-delay: -0.8571428571s;
          animation-delay: -0.8571428571s;
}
span:nth-child(4) {
  -webkit-animation-delay: -1.1428571429s;
          animation-delay: -1.1428571429s;
}
span:nth-child(5) {
  -webkit-animation-delay: -1.4285714286s;
          animation-delay: -1.4285714286s;
}
span:nth-child(6) {
  -webkit-animation-delay: -1.7142857143s;
          animation-delay: -1.7142857143s;
}
span:nth-child(7) {
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}

@-webkit-keyframes glow {
  0%, 100% {
    text-shadow: 0 0 8.3333333333px snow, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato;
  }
  33% {
    text-shadow: 0 0 8.3333333333px snow, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan;
  }
  66% {
    text-shadow: 0 0 8.3333333333px snow, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow;
  }
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 8.3333333333px snow, 0 -25px 50px tomato, -25px 25px 50px yellow, 25px 25px 50px tomato;
  }
  33% {
    text-shadow: 0 0 8.3333333333px snow, 0 -25px 50px cyan, -25px 25px 50px tomato, 25px 25px 50px cyan;
  }
  66% {
    text-shadow: 0 0 8.3333333333px snow, 0 -25px 50px yellow, -25px 25px 50px cyan, 25px 25px 50px yellow;
  }
}
</style>
</head>
<body>
  <span>G</span><span>L</span><span>O</span><span>W</span><span>I</span><span>N</span><span>G</span>
</body>
</html>

2. Flickering Neon Sign Effect using CSS Text & Box Shadow

Made by George W. Park. 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=Exo+2:200i);

:root {
  /* Base font size */
  font-size: 10px;   
  
  /* Set neon color */
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}

body {
  font-family: 'Exo 2', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;  
  background: #000;
  min-height: 100vh;
}

h1 {
  font-size: 13rem;
  font-weight: 200;
  font-style: italic;
  color: #fff;
  padding: 4rem 6rem 5.5rem;
  border: 0.4rem solid #fff;
  border-radius: 2rem;
  text-transform: uppercase;
  animation: flicker 1.5s infinite alternate;     
}

h1::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1:focus {
  outline: none;
}

/* Animate neon flicker */
@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 6rem var(--neon-text-color),
            0 0 8rem var(--neon-text-color),
            0 0 10rem var(--neon-text-color);
        
        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-border-color),
            inset 0 0 2rem var(--neon-border-color),
            0 0 4rem var(--neon-border-color),
            inset 0 0 4rem var(--neon-border-color);        
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}
</style>
</head>
<body>
  <h1 contenteditable spellcheck="false">open</h1>
</body>
</html>

3. Shimmering neon text

Made by Comehope. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.neon {
    position: relative;
    overflow: hidden;
    filter: brightness(200%);
}

.text {
    background-color: black;
    color: white;
    font-size: 180px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    user-select: none;
}

.text::before {
    content: attr(data-text);
    position: absolute;
    color: white;
    filter: blur(0.02em);
    mix-blend-mode: difference;
}

.gradient {
    position: absolute;
    background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
}

.spotlight {
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            circle,
            white,
            transparent 25%
        ) center / 25% 25%,
        radial-gradient(
            circle,
            white,
            black 25%
        ) center / 12.5% 12.5%;
    animation: light 5s linear infinite;
    mix-blend-mode: color-dodge;
}

@keyframes light {
    to {
        transform: translate(50%, 50%);
    }
}
</style>
</head>
<body>
  <div class="neon">
  <span class="text" data-text="thanks">thanks</span>
  <span class="gradient"></span>
  <span class="spotlight"></span>
</div>
</body>
</html>

4. Black Mirror Cracked Text Effect

Made by George W. Park. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}

h1 {
    position: relative;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: calc(20px + 5vw);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 0 0.15em #1da9cc;
    user-select: none;
    white-space: nowrap;
    filter: blur(0.007em);
    animation: shake 2.5s linear forwards;
}

h1 span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    -webkit-clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
            clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}

h1::before,
h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}

h1::before {
    animation: crack1 2.5s linear forwards;
    -webkit-clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}

h1::after {
    animation: crack2 2.5s linear forwards;
    -webkit-clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
            clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}

@keyframes shake {
    5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% {
        filter: blur(0.018em);
        transform: translateY(0.018em) rotate(0deg);
    }

    10%, 30%, 40%, 50%, 70%, 80%, 90% {
        filter: blur(0.01em);
        transform: translateY(-0.018em) rotate(0deg);
    }

    20%, 60% {
        filter: blur(0.03em);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }

    45%, 85% {
        filter: blur(0.03em);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }

    100% {
        filter: blur(0.007em);
        transform: translate(0) rotate(-0.5deg);
    }
}

@keyframes crack1 {
    0%, 95% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-51%, -48%);
    }
}

@keyframes crack2 {
    0%, 95% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-49%, -53%);
    }
}
</style>
</head>
<body>
  <h1 data-text="black mirror"><span>black mirror</span></h1>
</body>
</html>

5. Neon light text

Made by Sarah Fossheim. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
:root {
  --shadow-color: #FF9E9E;
  --shadow-color-light: white;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Archivo", sans-serif;
  background-color: #192824;
}

p {
  margin: calc(50vh - 40px) auto 0 auto;
  font-size: 65px;
  text-transform: uppercase;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: normal;
  display: block;
  height: auto;
  text-align: center;
}

.logo-1 {
  color: white;
  animation: neon 3s infinite;
}

@keyframes neon {
  0% {
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
    0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
  }
  50% {
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
    0 0 5px var(--shadow-color-light), 0 0 15px var(--shadow-color-light), 0 0 25px var(--shadow-color-light),
    0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 60px var(--shadow-color), 0 0 80px var(--shadow-color), 0 0 110px var(--shadow-color), 0 0 210px var(--shadow-color);
  }
  100% {
    text-shadow: -1px -1px 1px var(--shadow-color-light), -1px 1px 1px var(--shadow-color-light), 1px -1px 1px var(--shadow-color-light), 1px 1px 1px var(--shadow-color-light),
    0 0 3px var(--shadow-color-light), 0 0 10px var(--shadow-color-light), 0 0 20px var(--shadow-color-light),
    0 0 30px var(--shadow-color), 0 0 40px var(--shadow-color), 0 0 50px var(--shadow-color), 0 0 70px var(--shadow-color), 0 0 100px var(--shadow-color), 0 0 200px var(--shadow-color);
  }
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Archivo+Black&display=swap" rel="stylesheet">

<p class="logo-1">
      Neon lights
    </p>
</body>
</html>

6. Neon Text

Made by Mark Heggan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/*-- Base Styles --*/
html,
body {
  position: relative;
  margin: 0;
  height: 100%;
}

html {
  font-size: 16px;
}

body {
  font-family: "Vibur", cursive;
  font-size: 1rem;
  background-image: url("https://www.dropbox.com/s/2ct0i6kc61vp0bh/wall.jpg?raw=1");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #141414;
}

/*-- Sign Styles --*/
.sign {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sign span {
  font-size: 5.6rem;
  text-align: center;
  line-height: 1;
  color: #c6e2ff;
  -webkit-animation: neon 0.08s ease-in-out infinite alternate;
          animation: neon 0.08s ease-in-out infinite alternate;
}

/*-- Animation Keyframes --*/
@-webkit-keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2;
  }
}
@keyframes neon {
  from {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px #1e84f2;
  }
}
.link {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #828282;
  text-decoration: none;
}
.link:focus, .link:hover {
  color: #c6e2ff;
  text-shadow: 0 0 2px rgba(202, 228, 225, 0.92), 0 0 10px rgba(202, 228, 225, 0.34), 0 0 4px rgba(30, 132, 242, 0.52), 0 0 7px rgba(30, 132, 242, 0.92), 0 0 11px rgba(30, 132, 242, 0.78), 0 0 16px rgba(30, 132, 242, 0.92);
}
</style>
</head>
<body>
  <div class="sign">
	<span>no</span>
	<span>festival</span>
	<span>today</span>
</div> 
</body>
</html>

7. Neon Text Effect

Made by Matt Smith. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.neon {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #0ff,
    0 0 80px #0ff,
    0 0 90px #0ff,
    0 0 100px #0ff,
    0 0 150px #0ff;
}














/* general styling */
:root {
  font-size: calc(1vw + 1vh + 1.5vmin);
}

html, body {
  height: 100%;
  margin: 0;
}

.container {
  margin: 0 auto;
}

body {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #010a00;
  background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
  font-size: 1rem;
}

h1 {
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <div class="container">
  <h1 class="neon">Everything you want is<br>on the other side of fear</h1>
</div>
</body>
</html>

8. Neon Flux

Made by Thomas Trinca. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: table;
  background-color: black;
}

@font-face {
  font-family: neon;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.neon {
  font-family: neon;
  color: #FB4264;
  font-size: 9vw;
  line-height: 9vw;
  text-shadow: 0 0 3vw #F40A35;
}

.flux {
  font-family: neon;
  color: #426DFB;
  font-size: 9vw;
  line-height: 9vw;
  text-shadow: 0 0 3vw #2356FF;
}

.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 1s ease infinite;
  -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

.flux {
  animation: flux 2s linear infinite;
  -moz-animation: flux 2s linear infinite;
  -webkit-animation: flux 2s linear infinite;
  -o-animation: flux 2s linear infinite;
}

@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #28D7FE;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
    color: #146C80;
  }
}
</style>
</head>
<body>
  <div class="container">
  <div class="neon">Neon </div>
  <div class="flux">Flux </div>
</div>
</body>
</html>
 

9. Blazing Fire

Made by Makan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Akronim);

body {
    background: #ca8;
}

.fire {
	margin: 50px auto;
	width: 80%;
	max-width: 1000px;
	height: 200px;

	background-position: center center;
	background-size: 1000px 200px;
	border-radius: 10px;
	font-family: 'Akronim';
	overflow: hidden;
    text-align: center;
	vertical-align: middle;

}
.fire:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.Blazing {
	display: inline-block;
	margin: 0;

    color: rgb(255, 115, 0);
    font-size: 100px;
	line-height: 50px;
	min-width: 50px;
	outline: none;
	vertical-align: middle;
    
	text-shadow:
        0 3px 20px red,
        0 0 20px red,
		0 0 10px orange,
		4px -5px 6px yellow,
		-4px -10px 10px yellow,
		0 -10px 30px yellow;
	-webkit-animation: 2s Blazing infinite alternate linear;
	        animation: 2s Blazing infinite alternate linear;
}

@-webkit-keyframes Blazing {
	0%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 0 10px orange,
		0 0 0 yellow,
		0 0 5px yellow,
		-2px -5px 5px yellow,
		4px -10px 10px yellow; }
	25%   { text-shadow: 0 3px 20px red, 0 0 30px red,
		0 0 20px orange,
		0 0 5px yellow,
		-2px -5px 5px yellow,
		3px -10px 10px yellow,
		-4px -15px 20px yellow; }
	50%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 -5px 10px orange,
		-2px -5px 5px yellow,
		3px -10px 10px yellow,
		-4px -15px 20px yellow,
		2px -20px 30px rgba(255,255,0,0.5); }
	75%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 -5px 10px orange,
		3px -5px 5px yellow,
		-4px -10px 10px yellow,
		2px -20px 30px rgba(255,255,0,0.5),
		0px -25px 40px rgba(255,255,0,0)}
	100%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 0 10px orange,
		0 0 0 yellow,
		0 0 5px yellow,
		-2px -5px 5px yellow,
		4px -10px 10px yellow; }
}

@keyframes Blazing {
	0%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 0 10px orange,
		0 0 0 yellow,
		0 0 5px yellow,
		-2px -5px 5px yellow,
		4px -10px 10px yellow; }
	25%   { text-shadow: 0 3px 20px red, 0 0 30px red,
		0 0 20px orange,
		0 0 5px yellow,
		-2px -5px 5px yellow,
		3px -10px 10px yellow,
		-4px -15px 20px yellow; }
	50%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 -5px 10px orange,
		-2px -5px 5px yellow,
		3px -10px 10px yellow,
		-4px -15px 20px yellow,
		2px -20px 30px rgba(255,255,0,0.5); }
	75%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 -5px 10px orange,
		3px -5px 5px yellow,
		-4px -10px 10px yellow,
		2px -20px 30px rgba(255,255,0,0.5),
		0px -25px 40px rgba(255,255,0,0)}
	100%   { text-shadow: 0 3px 20px red, 0 0 20px red,
		0 0 10px orange,
		0 0 0 yellow,
		0 0 5px yellow,
		-2px -5px 5px yellow,
		4px -10px 10px yellow; }
}
</style>
</head>
<body>
  <div class="dark fire">
		    <h1 class="Blazing" contenteditable="true">BLAZING</h1>
	</div>
</body>
</html>

10. Efek Typography Text Neon

Made by Prima Utama Apriansyah. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/*setup*/
*{
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
}

@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');
}

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

@font-face {
  font-family: 'PressStart';
  font-style: normal;
  font-weight: 400;
  src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');
}

@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'Vampiro One';
  font-style: normal;
  font-weight: 400;
  src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

body{
  background-color: #222222;
}

#container{
  width:500px;
  margin:auto;
}


/*neeeeoooon*/
p{
  text-align:center;
  font-size:7em;
  margin:20px 0 20px 0; 
}

a{
  text-decoration:none; 
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

p:nth-child(1) a{
  color:#FF1177;
  font-family:Monoton;
}
p:nth-child(1) a:hover{
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate; 
}

p:nth-child(2) a{
  font-size:1.5em;
  color:#228DFF;
  font-family:Iceland;
}
p:nth-child(2) a:hover{
  -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}

p:nth-child(3) a{
  color:#FFDD1B;
  font-family:Pacifico;
}
p:nth-child(3) a:hover{ 
  -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate; 
}

p:nth-child(4) a{
  color:#B6FF00;
  font-family:PressStart;
  font-size:0.8em;
}
p:nth-child(4) a:hover{
  -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  animation: neon4 1.5s ease-in-out infinite alternate;
}

p:nth-child(5) a{
  color:#FF9900;
  font-family:Audiowide;
}
p:nth-child(5) a:hover{
  -webkit-animation: neon5 1.5s ease-in-out infinite alternate;
  -moz-animation: neon5 1.5s ease-in-out infinite alternate;
  animation: neon5 1.5s ease-in-out infinite alternate; 
}

p:nth-child(6) a{
  color:#BA01FF;
  font-family:Vampiro One;
}
p:nth-child(6) a:hover{
  -webkit-animation: neon6 1.5s ease-in-out infinite alternate;
  -moz-animation: neon6 1.5s ease-in-out infinite alternate;
  animation: neon6 1.5s ease-in-out infinite alternate;
}

p a:hover{
color:#ffffff;  
}



/*glow for webkit*/
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF1177,
               0 0 70px  #FF1177,
               0 0 80px  #FF1177,
               0 0 100px #FF1177,
               0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF1177,
               0 0 35px #FF1177,
               0 0 40px #FF1177,
               0 0 50px #FF1177,
               0 0 75px #FF1177;
  }
}

@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #228DFF,
               0 0 70px  #228DFF,
               0 0 80px  #228DFF,
               0 0 100px #228DFF,
               0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #228DFF,
               0 0 35px #228DFF,
               0 0 40px #228DFF,
               0 0 50px #228DFF,
               0 0 75px #228DFF;
  }
}

@-webkit-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FFDD1B,
               0 0 70px  #FFDD1B,
               0 0 80px  #FFDD1B,
               0 0 100px #FFDD1B,
               0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FFDD1B,
               0 0 35px #FFDD1B,
               0 0 40px #FFDD1B,
               0 0 50px #FFDD1B,
               0 0 75px #FFDD1B;
  }
}

@-webkit-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #B6FF00,
               0 0 70px  #B6FF00,
               0 0 80px  #B6FF00,
               0 0 100px #B6FF00,
               0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #B6FF00,
               0 0 35px #B6FF00,
               0 0 40px #B6FF00,
               0 0 50px #B6FF00,
               0 0 75px #B6FF00;
  }
}

@-webkit-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF9900,
               0 0 70px  #FF9900,
               0 0 80px  #FF9900,
               0 0 100px #FF9900,
               0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF9900,
               0 0 35px #FF9900,
               0 0 40px #FF9900,
               0 0 50px #FF9900,
               0 0 75px #FF9900;
  }
}

@-webkit-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 30px #fff,
               0 0 40px #ff00de,
               0 0 70px #ff00de,
               0 0 80px #ff00de,
               0 0 100px #ff00de,
               0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #ff00de,
               0 0 35px #ff00de,
               0 0 40px #ff00de,
               0 0 50px #ff00de,
               0 0 75px #ff00de;
  }
}

/*glow for mozilla*/
@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF1177,
               0 0 70px  #FF1177,
               0 0 80px  #FF1177,
               0 0 100px #FF1177,
               0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF1177,
               0 0 35px #FF1177,
               0 0 40px #FF1177,
               0 0 50px #FF1177,
               0 0 75px #FF1177;
  }
}

@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #228DFF,
               0 0 70px  #228DFF,
               0 0 80px  #228DFF,
               0 0 100px #228DFF,
               0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #228DFF,
               0 0 35px #228DFF,
               0 0 40px #228DFF,
               0 0 50px #228DFF,
               0 0 75px #228DFF;
  }
}

@-moz-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FFDD1B,
               0 0 70px  #FFDD1B,
               0 0 80px  #FFDD1B,
               0 0 100px #FFDD1B,
               0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FFDD1B,
               0 0 35px #FFDD1B,
               0 0 40px #FFDD1B,
               0 0 50px #FFDD1B,
               0 0 75px #FFDD1B;
  }
}

@-moz-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #B6FF00,
               0 0 70px  #B6FF00,
               0 0 80px  #B6FF00,
               0 0 100px #B6FF00,
               0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #B6FF00,
               0 0 35px #B6FF00,
               0 0 40px #B6FF00,
               0 0 50px #B6FF00,
               0 0 75px #B6FF00;
  }
}

@-moz-keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF9900,
               0 0 70px  #FF9900,
               0 0 80px  #FF9900,
               0 0 100px #FF9900,
               0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF9900,
               0 0 35px #FF9900,
               0 0 40px #FF9900,
               0 0 50px #FF9900,
               0 0 75px #FF9900;
  }
}

@-moz-keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 30px #fff,
               0 0 40px #ff00de,
               0 0 70px #ff00de,
               0 0 80px #ff00de,
               0 0 100px #ff00de,
               0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #ff00de,
               0 0 35px #ff00de,
               0 0 40px #ff00de,
               0 0 50px #ff00de,
               0 0 75px #ff00de;
  }
}

/*glow*/
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF1177,
               0 0 70px  #FF1177,
               0 0 80px  #FF1177,
               0 0 100px #FF1177,
               0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF1177,
               0 0 35px #FF1177,
               0 0 40px #FF1177,
               0 0 50px #FF1177,
               0 0 75px #FF1177;
  }
}

@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #228DFF,
               0 0 70px  #228DFF,
               0 0 80px  #228DFF,
               0 0 100px #228DFF,
               0 0 150px #228DFF;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #228DFF,
               0 0 35px #228DFF,
               0 0 40px #228DFF,
               0 0 50px #228DFF,
               0 0 75px #228DFF;
  }
}

@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FFDD1B,
               0 0 70px  #FFDD1B,
               0 0 80px  #FFDD1B,
               0 0 100px #FFDD1B,
               0 0 150px #FFDD1B;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FFDD1B,
               0 0 35px #FFDD1B,
               0 0 40px #FFDD1B,
               0 0 50px #FFDD1B,
               0 0 75px #FFDD1B;
  }
}

@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #B6FF00,
               0 0 70px  #B6FF00,
               0 0 80px  #B6FF00,
               0 0 100px #B6FF00,
               0 0 150px #B6FF00;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #B6FF00,
               0 0 35px #B6FF00,
               0 0 40px #B6FF00,
               0 0 50px #B6FF00,
               0 0 75px #B6FF00;
  }
}

@keyframes neon5 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF9900,
               0 0 70px  #FF9900,
               0 0 80px  #FF9900,
               0 0 100px #FF9900,
               0 0 150px #FF9900;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF9900,
               0 0 35px #FF9900,
               0 0 40px #FF9900,
               0 0 50px #FF9900,
               0 0 75px #FF9900;
  }
}

@keyframes neon6 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px #fff,
               0 0 30px #fff,
               0 0 40px #ff00de,
               0 0 70px #ff00de,
               0 0 80px #ff00de,
               0 0 100px #ff00de,
               0 0 150px #ff00de;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #ff00de,
               0 0 35px #ff00de,
               0 0 40px #ff00de,
               0 0 50px #ff00de,
               0 0 75px #ff00de;
  }
}


/*REEEEEEEEEEESPONSIVE*/
@media (max-width: 650px) {
  
  #container{
    width: 100%;
  }
  
  p{
    font-size:3.5em;
  }

}
</style>
</head>
<body>
  <div id="container">
  
  <p><a href="https://en.wikipedia.org/wiki/Red">
    RED
  </a></p>
  
  <p><a href="https://en.wikipedia.org/wiki/Blue">
    BLUE
  </a></p>
  
  <p><a href="https://en.wikipedia.org/wiki/Yellow">
    Yellow
  </a></p>
  
</div>
</body>
</html>

11. CSS glow text effect

Made by Kamal Das. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Merienda:[email protected]&display=swap" rel="stylesheet"> 
<style>
body{
  text-align:center;
  background-color:#010038;
}
h1{
  font-size:3rem;
  margin-top:45vh;
  color:white;
  font-family: 'Merienda', cursive;
  animation-name:glow;
  animation-duration:1s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

@keyframes glow{
  from{text-shadow:0px 0px 5px #fff,0px 0px 5px #614ad3;}
  to{text-shadow:0px 0px 20px #fff,0px 0px 20px #614ad3;}
}
</style>
</head>
<body>
  <h1>Glow text</h1>
</body>
</html>

12. Check Me Out Glow Text

Made by Sathya. 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=Abril+Fatface&display=swap);
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, to {
    transform: translateZ(-2px) translateY(5px);
  }
  40% {
    transform: rotateY(180deg) translateZ(-2px) translateY(-35px);
  }
  60% {
    transform: translateZ(-2px) translateY(-25px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, to {
    transform: translateZ(-2px) translateY(5px);
  }
  40% {
    transform: rotateY(180deg) translateZ(-2px) translateY(-35px);
  }
  60% {
    transform: translateZ(-2px) translateY(-25px);
  }
}
body {
  background-color: #1a1a1a;
  background: radial-gradient(circle at center, #1a1546, #040411 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  perspective: 1000px;
}

h3 {
  font-size: 3.5rem;
  line-height: 80%;
  transform: rotateX(0) rotateY(-25deg);
  text-transform: uppercase;
  width: 500px;
  text-align: center;
  color: #b9dfff;
  color: #fff;
  font-family: "Zefani";
  font-family: "Abril Fatface";
  margin: 3rem auto;
  position: relative;
  padding: 2rem 0 9rem;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228dff, 0 0 35px #228dff, 0 0 40px #228dff;
}
h3 span {
  display: inline-block;
}

.scroll-more {
  color: white;
  text-align: center;
  width: 450px;
  position: absolute;
  bottom: 8rem;
  left: calc(50% - 225px);
  margin: 0 auto;
  font-size: 25rem;
  opacity: 1;
  transition: opacity 0.3s ease;
  font-family: monospace;
  pointer-events: none;
  z-index: -1;
  transform-origin: center;
  -webkit-animation: bounce 3s cubic-bezier(0.37, 0, 0.21, 1.02) infinite, fonts 5s linear infinite;
  animation: bounce 3s cubic-bezier(0.37, 0, 0.21, 1.02) infinite, fonts 5s linear infinite;
}
</style>
</head>
<body>
  <h3>
 <span>Check</span>
 <span> me</span>
 <span> out</span>
 <span> across</span>
 <span> the</span>
 <span> internet</span>
 <div class="scroll-more">โ†“</div>
 </h3>
</body>
</html>

13. Neon Glow (+Cool Mouseover Effect)

Made by Jasper Andrew. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Quicksand);
body {
  background: #1f1f1f;
}

div {
  font-family: Quicksand, sans-serif;
  text-align: center;
  color: #1cbb22;
  font-size: 80px;
  margin: 0 auto;
  width: 600px;
}

#glow {
  transition: all .6s;
  animation: neon 3s ease-in-out infinite alternate;
}

#pro span:nth-child(1) {
  transition: all .2s;
}
#pro span:nth-child(2) {
  transition: all .4s;
}
#pro span:nth-child(3) {
  transition: all .6s;
}
#pro span:nth-child(4) {
  transition: all .8s;
}
#pro span:nth-child(5) {
  transition: all 1s;
}
#pro span:nth-child(6) {
  transition: all 1.2s;
}
#pro span:nth-child(6) {
  transition: all 1.4s;
}
#pro span:nth-child(7) {
  transition: all 1.6s;
}
#pro span:nth-child(8) {
  transition: all 1.8s;
}
#pro span:nth-child(9) {
  transition: all 2s;
}
#pro span:nth-child(10) {
  transition: all 2.2s;
}
#pro span:nth-child(11) {
  transition: all 2.4s;
}
#pro span:nth-child(12) {
  transition: all 2.6s;
}
#pro span:nth-child(13) {
  transition: all 2.8s;
}
#pro span:nth-child(14) {
  transition: all 3s;
}
#pro span:nth-child(15) {
  transition: all 3.2s;
}

#pro:hover span {
  color: rgba(28, 137, 34, 0);
	text-shadow: 
	0 0 1px #73D977, 
	0 0 5px #07520A, 
	0 0 1px #1cbb22, 
	0 0 2px #1cbb22, 
	0 0 3px #79d97d;
}

@keyframes neon {
  from {
    color: rgba(28, 137, 34, 0);
    text-shadow: 
      0 0 1px #73D977, 
      0 0 5px #07520A, 
      0 0 1px #1cbb22, 
      0 0 2px #1cbb22, 
      0 0 3px #79d97d;
  }
  to {
    color: rgba(28, 137, 34, 0);
    text-shadow: 
      0 0 1.5px #73D977, 
      0 0 5px #07520A, 
      0 0 1px #1cbb22, 
      0 0 3px #1cbb22, 
      0 0 4px #79d97d;
  }
}
</style>
</head>
<body>
  <div id="glow">Neon</div>
<div id="pro"><span>M</span><span>o</span><span>u</span><span>s</span><span>e</span><span>o</span><span>v</span><span>e</span><span>r</span> <span>M</span><span>e</span><span>!</span></div>
</body>
</html>