How To Create a Glowing Text

Glowing texts catch the user’s attention immediately. They can easily put someone in a good mood. You can choose light soothing colors and gently glowing elements, which will give a relaxed feeling to the user. Today’s tutorial will show you how to create a glowing text using only HTML and CSS. Follow the steps and see examples of glowing texts.

Create HTML

Create an <h1> tag with a <span class="attribute">class</span> "glow". Write a text in the tag.

How to create HTML h1 tag with class "glow"

<h1 class="glow">W3DOCS</h1>

Add CSS

Set the <body> background using the background property with a "linear-gradient" value.
Style the "glow" class with the font-size and color properties, and set the text-align property to "center".
Apply the animation property to the .glow class. It requires four values: animation-name, duration, timing-function, and iteration-count.
Use the @keyframes rule to define the animation steps. It can start with a percentage (%) or with the keywords "from" (0%) and "to" (100%).
Define the text-shadow property values inside the keyframes. The first value is the horizontal offset, the second is the vertical offset, the third is the blur-radius, and the final value is the shadow color.

How to use CSS @keyframes and text-shadow properties?

body {
  background: linear-gradient(90deg, rgba(177, 64, 200, 1) 0%, rgba(109, 9, 121, 1) 35%, 
              rgba(45, 1, 62, 1) 100%);
}

.glow {
  font-size: 70px;
  color: #ffffff;
  text-align: center;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000, 
                 0 0 50px #9554b3, 0 0 60px #9554b3, 0 0 70px #9554b3;
  }
  to {
    text-shadow: 0 0 20px #eeeeee, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 
                 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

Here is the final code.

Example of creating a glowing text with a linear gradient:

An example of how to create a glowing text using keyframe selector with the keywords "from" and "to".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: linear-gradient(90deg, rgba(177, 64, 200, 1) 0%, 
                    rgba(109, 9, 121, 1) 35%, rgba(45, 1, 62, 1) 100%);
      }
      .glow {
        font-size: 70px;
        color: #ffffff;
        text-align: center;
        animation: glow 1s ease-in-out infinite alternate;
      }
      @keyframes glow {
        from {
          text-shadow: 0 0 10px #eeeeee, 0 0 20px #000000, 0 0 30px #000000, 0 0 40px #000000, 
                       0 0 50px #9554b3, 0 0 60px #9554b3, 0 0 70px #9554b3;
        }
        to {
          text-shadow: 0 0 20px #eeeeee, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6,
                       0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
        }
      }
    </style>
  </head>
  <body>
    <h1 class="glow">W3DOCS</h1>
  </body>
</html>

Try it Yourself »

Result

<div class="demo mt-1 mb-5"> W3DOCS </div>### Example of creating a glowing text with a background color:

An example of how to create a glowing text.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        display: table;
        background-color: black;
      }
      .container {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      .glow {
        color: #FB4264;
        font-size: 9vw;
        line-height: 9vw;
        text-shadow: 0 0 3vw #F40A35;
        animation: glow 1.2s ease infinite;
      }
      @keyframes glow {
        0%,
        100% {
          text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
          color: #FED128;
        }
        50% {
          text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
          color: #806914;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="glow">W3DOCS</div>
    </div>
  </body>
</html>

Try it Yourself »

Note

For better accessibility and consistent scaling across devices, consider using rem or px instead of vw for font sizes and shadows.