動くグラデーションが入ったテキストをCSSで実装する

はじめに

最近は、インスタのロゴのようなおしゃれなグラデーションを取り入れたデザインが多く、実装してみたかったので簡単にまとめました。
背景だけでは物足りないのでグラデーションにCSSアニメーションで動きをつけて文字色として入れてみます。

こんな感じ

コードはこちら

See the Pen Gradient heading by takuma348 (@takuma348) on CodePen.

アニメーションとグラデーションに関するCSS

各プロパティのより詳しい仕様に関しては割愛させていただきます。

• animation & keyframes
  • CSSだけで実装できるアニメーション
• background: linear-gradient();
  • CSS関数で２つ以上の色を指定して画像を生成する
• background-clip: text;
  • 背景をテキストで切り抜く感じ

実装

HTML

index.html

<div class="gradient">
  <div class="gradient__wrap">
    <h1 class="gradient__title">Gradient<br>animation!</h1>
    </div>
  </div>
</div>

CSS

main.scss

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap');

.gradient {
  &__wrap {
    height: 100vh;
    
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__title {
    animation: AnimationTitle 5s ease infinite;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    
    font-size: 100px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    line-height: 1;
  }
}
@keyframes AnimationTitle {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

おわりに

全体的な背景に使用する場合は、アニメーション速度を３０秒くいらいでもう少しゆっくりめにした方がいい感じになります。
テキストだと表示範囲が狭いため３０秒くらいにすると色の変化が分かりずらいです。

参考サイト

いい感じのグラデーションをサクッと作れます。
いじっているだけでも楽しいです。

• uigradients
• ColorSpace