We can use the text-shadow property to create the light effect around the text. After that we can increase and decrease that light effect using animation.
CSS text-shadow Property
The CSS text-shadow property adds shadow to texts.
We can add a comma separated list of values to add shadows to the text.
For example,
We can add more than one shadow to the text by adding a comma separated list of values.
Animation
To create a CSS animation, we need to style the element with the animation property/sub-properties. It will let us configure the timing, duration, and other details of how the animation sequence should progress.
We can use shorthand property to set the animation values. The syntax is:
animation: name duration timing-function delay iteration-count direction fill-mode;
We don’t need to use all sub-properties for our example.
The @keyframes Rule
To change the animation from the current style to the new style at certain times, we can specify the styles inside the @keyframes rule. We also need to bind the animation to an element.
Complete Text Glow Example
animation glowing keyframes property text text-shadow
