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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

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

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

Add CSS

Set the color of the <body> element with the background property set to its "linear-gradient" value.
Style the "glow" class with the font-size and color properties and then, set the text-align property to its "center" value.
Create animation, which has five values. Use the -webkit- and -moz- vendor prefixes with this animation property.
Use the @keyframes rule. It can start with a percentage (%) or with the keywords "from" (same as 0%) and "to" (same as 100%).
Define the values of the text-shadow property. The first value is the horizontal offset of the shadow, and the second one is the vertical offset. The third is the blur-radius, and the final value is the color of the text.

The @keyframes rule is fully supported by major browsers. However, we use -webkit- for Google Chrome 4.0, Safari 4.0, and Opera 15.0.

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;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-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:

<!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;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
      }
      @-webkit-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

W3DOCS

Example of creating a glowing text with a background color:

<!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;
      }
      .glow {
        animation: glow 1.2s ease infinite;
        -moz-animation: glow 1.2s ease infinite;
        -webkit-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>