おしゃれパーツ

<p class="text-gradation">Design</p>
      

@keyframes textGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text-gradation {
  font-size: 48px; /* 例として大きめのフォントサイズを指定 */
  font-weight: bold; /* 太字を指定 */
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  animation: textGradient 9s ease infinite;
}