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