Hello Friends, in this article I will teach you how to create css glowing text effect, and also I have listed 10+ glowing text examples made with HTML, CSS & JavaScript. Check out these excellent examples which are available on CodePen.
How To Create a Glowing Text
First we have to use the text-shadow property to create the glowing text effect, and also we can use keyframes animation to add the repeatedly glowing effect.
HTML:
<h2 class="glowing-text">Stackfindover</h2>
CSS:
.glowing-text {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glowing-text 1s ease-in-out infinite alternate;
-moz-animation: glowing-text 1s ease-in-out infinite alternate;
animation: glowing-text 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing-text {
0% {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2e00e6, 0 0 40px #6300e6, 0 0 50px #c300e6, 0 0 60px #e200e6, 0 0 70px #e600ca;
}
100% {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
We can also use text-shadow without keyframes animation to create glowing text.
.glowing-text {
font-size: 80px;
color: #fff;
text-align: center;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
Best Collection of CSS Glowing text
In this collection, I have listed over 10+ best Glowing text made with HTML, CSS, and JS. Check out these awesome Glowing text animation examples like: #1 Shimmering glowing text, #2 Awesome Glowing Text, #3 CSS Glowing on click, and many more.
1 Shimmering glowing text
2 Animated glowing text effect
3 Simple Glowing text button style
4 CSS Glowing fire animated text
5 Glowing text animation
6 flickering glowing text animation
7 Glowing Text Loading Animation
8 Neon Glowing Text Animation
9 Glowing text typography effect
10 Simple Neon text animation
11 Multiple Glowing text animation examples
12 Black mirror cracked glowing text effect
Top comments (2)
please make sure to give proper credit to original author of each Pen.
sure i will