Welcome to a short tutorial on how to create glowing text with pure CSS and HTML. Need to catch the attention of users, or want to add some funky effects to your website?
A block of glowing text can be easily created by using the CSS text-shadow property. For example, p.glow { text-shadow: 0 0 10px #fff700 }
It’s that simple, but let us walk through more examples in this guide – Read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
Tutorial Video
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CSS GLOWING TEXT
When it comes to the glowing text, the immediate “recoil effect” of some people will be “it’s so difficult”. But well, it is in actual fact, a very simple and dumb CSS trick…
EXAMPLE 1) BASIC TEXT GLOW
<style>
/* (A) WORKS BEST ON DARK BACKGROUND */
body {
color: #fff;
background: #000;
}
/* (B) TEXT-SHADOW */
/* offset-x offset-y blur-radius color */
.glow { text-shadow: 0 0 10px #fff700; }
</style>
<h1>NO GLOW</h1>
<h1 class="glow">WITH GLOW</h1>NO GLOW
GLOW
- The glowing text effect works best on a dark background, which is why we set the HTML
<body>to a black background with white text. - The trick to glowing is actually done by using
text-shadow. But instead of a dark-colored shadow, we give it a light-colored shadow instead – This will create the glow illusion.
Yep, that’s all to it. Sorry to the folks who are looking for rocket science, there’s none to be found here.
EXAMPLE 2) STRONGER GLOW
<style>
/* (A) WORKS BEST ON DARK BACKGROUND */
body {
color: #fff;
background: #000;
}
/* (B) STACK SHADOW TO "GLOW STRONGER" */
.strongglow {
text-shadow:
0 0 5px #fff700, 0 0 10px #fff700,
0 0 20px #fff700, 0 0 40px #fff700;
}
</style>
<h1 class="strongglow">STRONK GLOW</h1>STRONK GLOW
You may have noticed that the above glow is not quite… strong enough. So yes, we can actually “stack” multiple text-shadow and make the glow more prominent.
EXAMPLE 3) GLOWING BORDER
<style>
/* (A) DARK BACKGROUND */
body { background: #000; }
/* (B) GLOWING SIGNBOARD */
.signboard {
/* (B1) SIZING */
width: 300px;
padding: 30px;
margin: 50px auto 0 auto;
/* (B2) FONT */
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
text-align: center;
color: #fff;
text-shadow:
0 0 5px #fff700, 0 0 10px #fff700,
0 0 20px #fff700, 0 0 40px #fff700;
/* (B3) BORDER */
border: 1px solid #00e1ff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}
</style>
<div class="signboard">HELLO WORLD!</div>
So far so good? Let us take it one more step forward and add a border to the text. This will effectively turn the glowing text into a neon signboard. Just like the text, we can also add a shadow to the border to create a glow effect. But instead using text-shadow, it is box-shadow for the borders.
EXAMPLE 4) FLASHING NEON
<style>
/* (A) DARK BACKGROUND */
body {
color: #fff;
background: #000;
}
/* (B) FLASH ANIMATION */
@keyframes flash {
/* (B1) FROM RED */
from {
text-shadow:
0 0 5px #fc0303, 0 0 10px #fc0303,
0 0 20px #fc0303, 0 0 40px #fc0303;
}
/* (B2) TO BLUE */
to {
text-shadow:
0 0 5px #03cafc, 0 0 10px #03cafc,
0 0 20px #03cafc, 0 0 40px #03cafc;
}
}
/* (C) ATTACH ANIMATION */
/* animation: keyframes duration function repeat direction */
.fglow { animation: flash 0.2s ease infinite alternate; }
</style>
<h1 class="fglow">RED ALERT</h1>RED ALERT
Animations may look difficult at first, but it is just a 2-step process:
- Define the animation
@keyframes– This can be as simple as what you want to start with, and what the final result should be. - Attach the
animationto the element.
That’s all, the rest of the magic will be automatically filled in by the browser.
EXAMPLE 5) FLICKER
<style>
/* (A) DARK BACKGROUND */
body {
color: #fff;
background: #000;
}
/* (B) FLICKER ANIMATION */
@keyframes flicker {
from {
text-shadow:
0 0 5px #00dcff,0 0 10px #00dcff,
0 0 20px #00dcff, 0 0 40px #00dcff;
}
to {
text-shadow:
0 0 5px #09889c, 0 0 10px #09889c,
0 0 20px #09889c, 0 0 40px #09889c;
}
}
/* (C) ATTACH ANIMATION */
.flick { animation: flicker 1s ease-in-out infinite alternate; }
</style>
<h1 class="flick">WELCOME!</h1>WELCOME!
Is the flashing animation too catchy? Then just slow down and do a few tweaks to the animation. The possibilities are endless. We can even add a border and animate the box-shadow – I will leave it up to you to play with all of those.
EXTRA BITS & LINKS
That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- Text Shadow – MDN
- Box Shadow – MDN
- CSS Keyframes – MDN
- Animation – MDN
- Example on CodePen – Pure CSS Glowing Text
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET
THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
