hello and welcome to red stapler channel in this tutorial I'm going to show you
how to make a CSS animated text with neon light effect in just a few minutes
ready? let's check it out
so here is the blank page that I'm going to work on I already set the background
to black and set all the justification and alignment to Center on flex display
first let's start with HTML structure I'm going to create a wrapper div with a
span inside and assign a class to it
next set the text color to white and background to black
and set the size font-weight family and as you like
I will also add an inline flex display to the wrapper div to make it fits all the
child elements inside
next I'm going to add a pseudo element to the span with the same text
now let's set the position to absolute and make this pseudo element overlay a
span and then we will add a mix blend mode and set it to difference this will
get us the outline of the text
and add a small blur filter to create a light effect
it looks a bit dull so let's bump up the brightness
now you will start to see a neon effect now
next let's work on a call gradient create a new span with a class
then add a linear gradient with any color that you like
for me I'm going to use a gradpad to generate the CSS code
and set the position to absolute width and height to 100% and top-left to zero
you'll see that the gradient span is overlaying the text the trick is to add
a multiply blend effect and that's it
now for the animation effect we can achieve that by creating another span
with a class and add a repeated radial gradient with a color dodge blend effect
I'm going to use a shorthand background properties with radial gradient to create
a black and white circle background
and also set the starting position to minus 100% and maximize the size by
setting right and bottom to zero
and here's what it looks like
okay let's add a color Dodge and animation loop
and finally we will add overflow heat to the wrapper div to hide excess dodge
background
so that's all for this tutorial if you love
video like share or subscribe to support us thanks for watching and see you on
the next upload bye