Elementor glowing text effect – Neon glow using CSS and heading widget | Dieno Digital Marketing Services

In this quick Elementor CSS hacks video, learn how to achieve Neon glowing text using just Elementor heading widget and CSS.

Get Elementor Pro:
https://bit.ly/designelementorpro

Join our Facebook Group: https://www.facebook.com/groups/designschoolwp

References:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

The technique uses CSS text shadow and CSS animation properties.

Custom CSS with elementor free version:

Elementor CSS animations:

Introduction to Custom CSS:

CSS code used in the video:

selector .elementor-heading-title
{
color:#fff;
animation: glowtext 2s ease-in-out infinite ;
}
@-webkit-keyframes glowtext {
0% {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #008000 , 0 0 40px #008000 , 0 0 50px #008000 , 0 0 60px #008000 , 0 0 70px #008000 ;
}

100% {
text-shadow: 0 0 20px #fff, 0 0 30px #00FF00, 0 0 40px #00FF00, 0 0 50px #00FF00, 0 0 60px #00FF00, 0 0 70px #00FF00, 0 0 80px #00FF00;

}
}
/*End of code*/

source