Glowing Text With Pure HTML CSS ( Very Simple Examples)

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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Glowing Text Useful Bits & Links
The End

 

 

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

1-basic-glow.html
<style>
/* (A) WORKS BEST ON DARK BACKGROUND */
body {
  background: #000;
  color: #fff;
}
 
/* (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

 

  1. 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.
  2. 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

2-strong-glow.html
<style>
/* (A) WORKS BEST ON DARK BACKGROUND */
body {
  background: #000;
  color: #fff;
}
 
/* (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

3-border-glow.html
<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, 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>
HELLO WORLD!

 

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

4-flash.html
<style>
/* (A) DARK BACKGROUND */
body {
  background: #000;
  color: #fff;
}

/* (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 animation to the element.

That’s all, the rest of the magic will be automatically filled in by the browser.

 

EXAMPLE 5) FLICKER

5-flicker.html
<style>
/* (A) DARK BACKGROUND */
body {
  background: #000;
  color: #fff;
}

/* (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.

 

 

USEFUL 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

 

INFOGRAPHIC CHEAT SHEET

CSS Glowing Text (click to enlarge)

 

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!

Leave a Comment

Your email address will not be published.