【CSS】テキストをグラデーション、アニメーションさせる方法

グラデーションをつくる

  .gradient-box {
    background-image: linear-gradient(
      90deg,
      rgba(247, 12, 12, 1),
      rgba(255, 248, 34, 1) 20%,
      rgba(39, 238, 73, 1) 40%,
      rgba(35, 202, 247, 1) 60%,
      rgba(147, 35, 247, 1) 80%,
      rgba(247, 35, 133, 1)
    );
  }

CSSジェネレーター

グラデーションをアニメーションさせる

  .gradient-box {
    /* background-imageは省略 */
    filter: hue-rotate(360deg);
    animation: ani 15s infinite;
  }
  @keyframes ani {
    0%,
    100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(360deg);
    }
  }

参考

【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる

文字のストロークに適用させる

  <div class="wrapper">
    <div class="gradient-box">テキスト  グラデーション</div>
  </div>

  /* .wrapper のCSS 省略 */
  
  .wrapper .gradient-box {
    /* background-image 省略 */
    /* filter 省略 */
    /* animation 省略 */
    /* @keyframes 省略 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.1em transparent;
  }

文字全体に適用させる

  /* .wrapper のCSS 省略 */

.wrapper .gradient-box {
/* background-image 省略 */
/* filter 省略 */
/* animation 省略 */
/* @keyframes 省略 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 0.1em transparent;
-webkit-text-fill-color: transparent; /* この1行を追加 */
}