Neon glow text with pure css

neonglowtextanimationeffect

Neon glow text with pure css Tutorial by Mirko Zovko | 07. Mar. 2020.

You probably all needed some text effects for your website like shadows, long shadows, slashed text, clip text, 3d text, etc. In this tutorials I'll show you how to create neon text with glow animation. You will be able to use this neon glow effect immediately or only on mouse hover.


For this tutorial to make it simple I'll use only Ubuntu font with weight of 700 to make it more bigger and nicer, and I'll use red and blue neon color. Red color will be immediately with glow effect and blue color will have glow effect only on hover. For start you need to create two paragraphs.


Next thing that you need to do is add little style on your text, in my case I added font weight of 700, and font size of 7em and apply animation on it.


As I told you for this example I only use two neon glow animation, and that is red and blue animation.


You can see functional code below on jsFiddle, and except that I create one more jsFiddle with more examples for different font with different neon glow colors effect. I hope you'll like it.