Smashing Magazine did an article in 2019, discussing what creative text effects were trending in web design. Amongst the list, neon text was commended as an interesting effect to build into websites. Especially amongst websites dealing with entertainment and creative industries. As we move into another new decade, there's an opportunity to reminisce at art and design of a bygone era - focusing on something that's quintessentially 70s and 80s.

No neon text stack existed for RapidWeaver, so we took it upon ourselves to create a new one, to share. We made use of this same stack for some creative advertising on Stacks4Stacks and ThemeFlood. Needless to say, it worked great and gained plenty of attention! Within a couple of hours, people were emailing to ask how to accomplish the same effects.


Here are some examples of our NeonText stack in action. These are not GIFs or video - these are actual renderings of the NeonText stack:
Happy Hour
Keys cut here
Flaming Grill
Sale now on!
Give your text more voltage. Display multiple lines of text on your neon sign like this
Top prices paid
This sign wants repairing
Missing Letters
- Cocktail bar -
The Love Lounge
This example was created with a Shady and BoxCanvas stacks. Then NeonText stacks were placed inside, a single stack for each block of text. Different colours font faces and animation effects have been applied, to demonstrate the various styles possible.

Font Awesome Icons are possible within your text, if your chosen theme supports them. In the examples above, we used Font Awesome HTML code, alongside the normal text. Regular styled icons (unfilled icons with an outline) instead of solid-filled icons look more authentic for neon signs. Icons like the heart work well:

<i class="far fa-heart"></I>


Once installed into Stacks and RapidWeaver, open your Stacks Library and add a NeonText stack to the page. All options for this stack are listed in the Stacks side panel. Enter your text here and customise the styling as required.

NeonText works best for short headlines. It is less suitable to use for larger blocks of text. Too much text gives a fatiguing feeling! Short, snappy headlines work better. Worth noting that the animation effect can be disabled altogether if it's not wanted.

To make particular letters in your text unlit (burnt out), add a span tag around them with a class attribute of failed applied like this:

S<span class="failed">uper</span>mar<span class="failed">ke</span>t

To make particular letters blink (to emulate imminent failure), add a span tag around them with a class attribute of failing-1 applied like this:

S<span class="failing-1">uper</span>mar<span class="failing-3">ke</span>t

Changing the number in the class name between 1 and 5 gives a different blinking sequence. This makes the failure look more randomised in nature across the neon sign.

If you need to make your NeonText stack a link, just nest it within one of our LinkBox stacks. Other stacks like Shady, TintStack and BoxCanvas could also prove useful too.


If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.