CSS Tip #15 - Neon Text Effect #shorts

Key Takeaways

all right there my friend so I wanted to share this quick CSS tip so you can make this pretty cool looking at neon text effect in a browser so first of all we have an H1 in the HTML which we want to apply the effect to and also I'm loading in a free Google web font called Neanderthal in the CSS we target the H1 and apply a font weight of normal and a color of white so to add the neon glow effect we're going to make a quick keyframes animation using multiple text Shadows which stack on top of each other and they're going to transition from one glow strength to another on repeat so let me paste this in and you can see that we go from this state which is a bunch of stacked text Shadows to this date which is another bunch of text Shadows so each value is position zero zero right on top of the text and it has different blur strengths which is the third number this is the main changing value on each of the text Shadows it gets larger each time and this allows it to have a radio like blur on the text so that the glow Fades nicely as you get further away from the text the first couple of Shadows also have a white value these are the ones which will be really tight to the text and the outer ones have a pink value to give it that pink glow in the second state all we do is change the blur values to be half of the starting values and that gives us a more realistic blur flicker that you can play around with and finally we need to apply this animation to the H1 lasting about one second infinite and Alternate as well so it keeps on going a loop and now in a browser we can see that cool neon effect awesome