Shining Text Animation

In this tutorial, you will learn how to create an inifnite shining text animation using pure CSS. Linear gradient is used to achieve the shining effect. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1>Winterwind Inc.</h1>
</body>

CSS

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

h1 {
  font-size: 4em;
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(to right, #666363 0, white 10%, #666363 20%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 3s linear infinite;
}

@keyframes  animate {
  0% {
    background-position: 0;
  }
  50% {
    background-position: 470px;
  }
  100% {
    background-position: 470px;
  }
}