10+ CSS Glowing Text Effect – Stackfindover
Tags: html, css, beginners, javascript
Published: 2021-08-21 15:56:13

***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:**
```html
<h2 class="glowing-text">Stackfindover</h2>
```

**CSS:**
```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.**

```css
.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
{% codepen https://codepen.io/comehope/pen/GBwvxw %}

#### 2 Animated glowing text effect
{% codepen https://codepen.io/bennettfeely/pen/BzGVkA %}

#### 3 Simple Glowing text button style
{% codepen https://codepen.io/prathkum/pen/KKzdXpY %}

#### 4 CSS Glowing fire animated text
{% codepen https://codepen.io/zFunx/pen/BZpdaa %}

#### 5 Glowing text animation
{% codepen https://codepen.io/habibjh88/pen/JwOwyz %}

#### 6 flickering glowing text animation
{% codepen https://codepen.io/7low/pen/VOBrpr %}

#### 7 Glowing Text Loading Animation
{% codepen https://codepen.io/shashcode/pen/bjXPaQ %}

#### 8 Neon Glowing Text Animation
{% codepen https://codepen.io/theSujoySarkar/pen/pojEvmO %}

#### 9 Glowing text typography effect
{% codepen https://codepen.io/Anmolp/pen/WNGEOjm %}

#### 10 Simple Neon text animation
{% codepen https://codepen.io/markheggan/pen/LjrVYN %}

#### 11 Multiple Glowing text animation examples
{% codepen https://codepen.io/erikjung/pen/XdWEKE %}

#### 12 Black mirror cracked glowing text effect
{% codepen https://codepen.io/GeorgePark/pen/jeBbGN %}


### You may like this also
<a href="https://blog.stackfindover.com/css-glowing-effect/">25+ Css Glowing Effect [ These effects blow your 🤯 mind ]</a>

<a href="https://blog.stackfindover.com/html-popup-box/">HTML Popup Box [ Best Popup designs ever ]</a>