How to Create a Shining Text Animation Effect

Using text effects can make your website more attractive and engaging. In this tutorial, you’ll learn how to 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.

How to use an HTML <p> tag?

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

Info

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.

How to create animation with the help of CSS @keyframes Rule ?

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;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

Note

background-size: 80% defines the width of the shine. You can increase it (e.g., to 200%) to prevent edge clipping on smaller viewports.

Now let’s try some examples.

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

An example of how to create a shining text animation effect

<!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;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
      @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

<div class="demo px-2.5 mt-1 mb-5">Shine bright like a diamond.

</div>You can change the colors of your text with the help of the <span class="property">background</span> property as you want. Note that changing the gradient angle (e.g., 90deg) only alters the direction of the shine, not the effect itself.

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

This example demonstrates how to adjust the animation duration, font styling, and gradient colors.

How to create a shining text animation effect using CSS properties?

<!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;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
      @keyframes animate {
        0% {
          background-position: -500%;
        }
        100% {
          background-position: 500%;
        }
      }
    </style>
  </head>
  <body>
    <p>Shiny text</p>
  </body>
</html>

Try it Yourself »