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