An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
August 21, 2021 03:56 pm GMT
Original Link: https://dev.to/stackfindover/10-css-glowing-text-effect-stackfindover-402b
10 CSS Glowing Text Effect 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
Original Link: https://dev.to/stackfindover/10-css-glowing-text-effect-stackfindover-402b
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To