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.

CSS I used

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);
	}
}

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

15 + 4 =

[wpforms id="2272"]