Neon fonts and glowing text | CSS animation and effects

Neon fonts and glowing text CSS: get started in two steps

August 10th, 2022

3 min read

Neon sign of speech ballon with text: 'hello'.

Get started with neon fonts and glowing text in your web design, using CSS, in just two steps:

It's as simple as that!

If you also happen to be using our WYSIWYG HTML editor, there’s one more step you can take to make sure the editing experience is indeed what you see is what you get.

Fonts can be really fun to play around with. Enjoy!

Note: I thought about swapping the order of these steps (and indeed you could) but, personally, I think it’s easier to choose between fonts when they’re already glowing and you can see the final product.

Neon text background: dark theme

If you’re keen to use neon fonts and glowing text, you’ll probably want to start with a dark background.

So, fire up your CodePen, CodeSandbox or what have you and start with a dark theme in your CSS, such as this one:

body {
  background-color: #2f3742;
  color: #dfe0e4;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

Step 1. Make your text glow with CSS

You can make your text glow using text-shadow in your CSS. For instance, you can specify a heading in CSS as follows, using white text (#fff) and shadows of white and blue (#0073e6):

h1 {
  font-size: 80px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
}

Then, when you mark up your text with that heading, it will glow.

<h1>Neon Rocks!</h1>

CSS animation and pulsating text

Now, you can skip straight to step 2...

...or you can stay here just a little bit longer and try some other effects, like pulsating text, using animation and @keyframes.

h1 {
  font-size: 80px;
  text-align: center;
  color: #fff;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0073e6, 0 0 40px #0073e6, 0 0 50px #0073e6, 0 0 60px #0073e6, 0 0 70px #0073e6;
  }
}

Note: It’s best to include vendor prefixes to allow for different browsers and versions as demonstrated in this example from W3Schools.

You could also try this, although I’m not going to embed the CodePen for this one because it’s way too annoying 😜

h1 {
  font-size: 80px;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

It’s really up to you to play around with colors and effects as much as you please. Have fun with it! Why not try making it flicker like a fluro?

Get Your Free TinyMCE API Key →

Step 2. Import a neon font using @import

One of the easiest ways to use custom fonts on your site is to import a Google Font. Warnes is a Google Font designed by Eduardo Tunni that we think is just perfect for our example. You can use any font, but some fonts look better than others when they glow.

Import your selected font in your CSS:

@import url('https://fonts.googleapis.com/css?family=Warnes&display=swap');

Then modify the font-family to use it, on the header, for example:

h1 {
  font-size: 80px;
  text-align: center;
  font-family: 'Warnes', cursive;
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6;
}

And you’re done!

Neon text with Google fonts

Here are 6 Google Fonts we think work quite well as neon text. But you should also look around yourself and find what works best for you.

Using TinyMCE? Get the full WYSIWYG editing experience

If you’re using TinyMCE, you can configure it with the same CSS as your HTML pages so your users get the full WYSIWYG editing experience.

I was actually inspired to look into this topic when I first saw TinyMCE dark mode. As soon as I saw it, I thought, I know what would look good on that... Neon! Neon Rocks! 🕺

content_css can be used to load a specific stylesheet, for example, your website’s stylesheet. content_style can be used to tweak (or override) parts of whatever stylesheet the editor is using (whether that be the default CSS or one you’ve specified with content_css).

Here’s an example of TinyMCE initialized with content_style to load the CSS we defined above. We’ve also applied the TinyMCE dark skin with skin: 'oxide-dark'.

What next?

If you're not yet familiar with our TinyMCE WYSIWYG HTML editor and how it provides users with a great content creation experience, you can start by checking out the full featured demo.

Integrating TinyMCE with your own applications is easy. Get a free API Key (including a 14 day trial of all the premium plugins) and get started within minutes.