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.

Create HTML

  • Put your text in a <p> tag, which defines a paragraph of text.
<p>Shine bright like a diamond.</p>

Add CSS


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>

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>
Do you find this helpful?

Related articles