WittCode💻

How to Create Glowing Text using CSS

By

Learn how to create glowing text using HTML and CSS. Specifically, we will use CSS animations and keyframes.

Table of Contents 📖

How to Create the Glowing Text Effect

To create the glowing text effect, we need to animate the CSS text-shadow property. The text-shadow property adds shadow to text.

Image

Writing the HTML

To start lets write the HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glowing Text</title>
</head>
<body>
  <h1 class="glow-text">Download WittCepter, the best chrome extension!</h1>
</body>
</html>

Here, we will animate the h1 tag. This will be done using the class glow-text.

Creating the Glowing Text Effect

To animate the the text's text-shadow property, we need to use keyframes.

@keyframes glow {
  0% {
    text-shadow: 0 0 5px red;
  }
  50% {
    text-shadow: 0 0 5px green;
  }
  100% {
    text-shadow: 0 0 5px blue;
  }
}

CSS @keyframe rules are used to create animations. They change the current style of an element to the ones provided. For example, here we say when the animation is starting set the text-shadow to red, when the animation is 50% complete set the text-shadow to green, and when the animation is complete set the text-shadow to blue. The text-shadow property also has a few other arguments than just color.

  • h-shadow - Required. Position of the horizontal shadow.
  • v-shadow - Required. Position of the vertical shadow.
  • blur-radius - Optional. Radius of the blur.
  • color - Optional. Color of the shadow.

Note that we set both the horizontal and vertical shadows to 0 as we want the shadow to be centered around the text. Now lets create this glow animation.

.glow-text {
  animation-name: glow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}
  • Create a class called glow-text.
  • Create an animation called glow using the animation-name property.
  • Make the animation last 2 seconds using the animation-duration property.
  • Set the animation-iteration-count property to infinite. This tells the browser to repeat the animation infinitely.
  • Set the animation-direction property to alternate. This tells the browser to play the animation forward first and then backwards.
  • Set the animation-timing-function property to linear. This property specifies the time an animation takes to go from one set of CSS styles to another. Setting it to linear keeps the animation at the same speed throughout.

Note how the animation-name of glow matches the name provided to the @keyframes rule. This is so our animation follows those rules.