DEV Community

Cover image for 10+ CSS Glowing Text Effect – Stackfindover
Stackfindover
Stackfindover

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 ]

Discussion (2)

Collapse
afif profile image
Temani Afif

please make sure to give proper credit to original author of each Pen.

Collapse
stackfindover profile image
Stackfindover Author

sure i will