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 glowing text using only HTML and CSS. Follow the steps and see examples of glowing texts.

1. Create HTML

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

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

2. Create CSS

Set a color for the background. We use the linear-gradient function for the background. It creates an image consisting of a progressive transition between two or more colors along a straight line.

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

Now let’s create a glow!

  • Set the font-size of the text, the color and specify where the text should be situated with the text-align property.
  • Create animation which has five values. We set the animation-duration to 1 second which means that animation takes 1 second to complete one cycle. Use the ease-in-out keyword of the animation-timing-function property which defines how the animation will progress over the duration of each cycle — not throughout the whole of the animation. Set the animation-iteration-count to infinite so as the animation plays without stopping. Specify the animation-direction setting it to alternate so as the animation is played forward, then reversed and repeated. (Use -webkit- and -moz- vendor prefixes with the animation property).
.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;
}

The keyframe selector can start with a percentage (%) or with the keywords "from" (same as 0%) and "to" (same as 100%). 0% is a starting point of the animation, 100% is the endpoint.

  • Define the values of the text-shadow property. The first value is the horizontal offset of the shadow. The second value is the vertical offset. The third one is the blur-radius which defines how big and how much blurred the shadow is. The final value is the color of the text.

The @keyframes rule is fully supported by major browsers. However, some prefixes are used:

  • -webkit- Google Chrome 4.0
  • -moz- Mozilla Firefox 5.0
  • -webkit- Safari 4.0
  • -webkit- Opera 15.0
  • -o- Opera 12.0
@-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

<!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>

Let’s see another example:

Example

<!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>

Do you find this helpful?

Related articles