X

Headline

This is an important message requiring you to make a choice if you're based in the EU.
  1. Snippets
  2. ›
  3. CSS
  4. ›
  5. How to Create a Shining Text Animation Effect

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.

1. Create HTML

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

2. Add CSS

Let’s begin to style the HTML <body> tag.

  • Put CSS margin property, which creates a space around the element by choosing its initial value “0”.
  • Use CSS padding property to create space around the element content.
  • Put CSS display property, which defines the type of the box which is used for an HTML element, and choose the “flex” value, that displays an element as a block-level-flex container.
  • Turn comes to the CSS justify-content property, which aligns the items when the items do not use all available space horizontally and choose the “center” value to place the item at the center of the container.
  • Use CSS align-items property, which defines the default alignment for flex items by choosing its “center” value.
  • With the help of CSS background-color property put the background color which you prefer.
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000000;
}

Now we are going to style our text.

  • Position your text with the help of CSS position property by choosing its “relative” value.
  • Choose the font size and font via CSS font size and CSS font-family properties.
  • If you want to give your text a gradient effect you should use a linear-gradient function with the help of CSS background property.

To create a linear-gradient you must define at least two color stops.

  • Give your background image size by using CSS background-size property.
  • Put CSS animation property to animate your text and set the “infinite” value in order to make the animation play endlessly.
  • Use CSS background-clip property, which specifies how far the background-color and background-image should be from the element by choosing the “text” value.
  • Put CSS background-repeat property and choose its default “no-repeat” value, where the background image is repeated both horizontally and vertically.
  • Use CSS text-fill-color property to specify the fill color of characters of your text.
p {
  position: relative;
  font-family: Impact, sans-serif;
  font-size: 45px;
  letter-spacing: 2px;
  background: 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);
}

The final step is making our animation work. It’s done with the help of @keyframes rule, which helps to specify what should happen at specific moments during the animation.

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

Now let’s try some examples.

Example

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

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

Example

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