How to create glowing text effect in Elementor | Elementor tutorial

In this quick tutorial I will show you how to add glowing/Neon text effect and also how to make that lightening using Elementor.

Essential Links

Get Domain & Webhosting(60% off)

Get Elementor Pro

Get CSS code

CSS for Neon text effect

/*Glowing text only*/
:root{
    --glow: #03bcf4;
}

selector h2 {
	text-shadow: 0 0 10px var(--glow),
		 0 0 20px var(--glow),
		  0 0 40px var(--glow),
		   0 0 80px var(--glow),
		   0 0 160px var(--glow);
}

CSS for Neon text effect with lightening

/*Glowing and lightening text*/

:root{

    --dark: #0D1C45;

    --white: #ffffff;

    --glow: #03bcf4;

}

selector h2 {

	animation:animate 5s linear infinite;

}

@keyframes animate {

	0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%{

		color: var(--dark);

		text-shadow: none;

	}

	18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%{

		color: var(--white);

		text-shadow: 0 0 10px var(--glow),

		 0 0 20px var(--glow),

		  0 0 40px var(--glow),

		   0 0 80px var(--glow),

		   0 0 160px var(--glow);

	}

}