How to Create a Shining Text Animation Effect

Using text effects is always a good idea, as they make your Website attractive and interesting for the visitors. If you want to learn a new effect for your texts, read our snippet and create a shining text animation effect.

Now let’s dive in and create one together.

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

Create HTML

Put your text in a <p> tag, which defines a paragraph of text.

<p>Shine bright like a diamond.</p>

Add CSS

Set the display of the <body> element to "flex", add the margin and padding properties. Then, set both the justify-content and align-items properties to "center" to place the item at the center of the container and define the default alignment for flex items, accordingly. Add the background-color property.
Position your text with the help of the position property set to its “relative” value. Specify the font size and font-family, and letter-spacing properties. Add the background properties.

To create a linear-gradient, you need to define at least two color stops.

Put the animation property with the “infinite” value to make the animation play endlessly.
Use the text-fill-color property to specify the fill color of characters of your text.
Make the animation work with the help of @keyframes, which helps to specify what should happen at specific moments during the animation.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
}

p {
  position: relative;
  font-family: Impact, sans-serif;
  font-size: 45px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #90EE90, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 5s infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

Now let’s try some examples.

Example of creating a shining text animation effect lasting 5 seconds:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000000;
      }
      p {
        position: relative;
        font-family: Impact, sans-serif;
        font-size: 45px;
        letter-spacing: 2px;
        background: linear-gradient(90deg, #90EE90, #fff, #000);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 5s infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
      }
      @keyframes animate {
        0% {
          background-position: -500%;
        }
        100% {
          background-position: 500%;
        }
      }
    </style>
  </head>
  <body>
    <p>Shine bright like a diamond.</p>
  </body>
</html>

Try it Yourself »

Result

Shine bright like a diamond.

You can change the colors of your text with the help of the background property as you want but don’t change the degree as it’s responsible for the shining effect.

Example of creating a shining text animation effect lasting 3 seconds:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000000;
      }
      p {
        position: relative;
        font-family: Geneva, sans-serif;
        font-size: 60px;
        text-transform: uppercase;
        letter-spacing: 2px;
        background: linear-gradient(90deg, #DC143C, #fff, #000);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
      }
      @keyframes animate {
        0% {
          background-position: -500%;
        }
        100% {
          background-position: 500%;
        }
      }
    </style>
  </head>
  <body>
    <p>Shiny text</p>
  </body>
</html>