This content originally appeared on DEV Community and was authored by Stackfindover
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
You may like this also
25+ Css Glowing Effect [ These effects blow your ? mind ]
HTML Popup Box [ Best Popup designs ever ]
This content originally appeared on DEV Community and was authored by Stackfindover
Stackfindover | Sciencx (2021-08-21T15:56:13+00:00) 10+ CSS Glowing Text Effect – Stackfindover. Retrieved from https://www.scien.cx/2021/08/21/10-css-glowing-text-effect-stackfindover/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.