CSSで文字の色を変えることができ、グラデーションで付けたいと思ったのですが、どうやらその設定はないようでした。
少しテクニックが必要だったので、やり方をまとめていきたいと思います。
背景色はグラテーションを付けられる
共通のHTML・CSS
今回実装していくにあたって共通で使うHTML・CSSです。
わかりやすいように縦横300pxで背景色をグレーにしております。
黒色
赤色
<div class="background">
<span class="gradation">グラデーション</span>
<br>
<span style="color: black;">黒色</span>
<br>
<span style="color: red;">赤色</span>
</div>.background {
width: 300px;
height: 300px;
font-weight: bold;
background: darkgray;
}linear-gradientは背景色限定
linear-gradientを使ってグラテーションを付けることができます。
細かい使い方は公式を見て欲しいのですが、(傾き, 始まりの色, 終わりの色)を指定してつけることができます。
この例の場合は、45度で傾けて、黄緑色→明るい青い色にしております。
黒色
赤色
.gradation {
background: linear-gradient(45deg, yellowgreen, lightskyblue);
}もしグラデーションにこだわりたい方は、CSS グラデーション ジェネレーターというものがあるので試してみてください。
文字にグラデーションを付ける
テクニック的なやり方ですが、グラデーション付けた背景の上に透明色の文字を乗せるようなやり方でやります。
背景色にグラデーションを付ける
先ほど作ったHTMLそのまま使います。
背景を文字の形に切り取り、文字を透明色にする
.gradation {
background: linear-gradient(45deg, yellowgreen, lightskyblue);
-webkit-background-clip: text;
color: transparent;
}-webkit-background-clipで背景を文字の形に切り取ります。
文字の形をした背景だけ残っているのですが、ただ文字に色（黒色）が付いているので、その上の文字と重なってしまっています。
これだけだとただ背景色がなくなっただけになってしまうので、文字を透明色にします。
これはcolorでtransparentを指定するだけでよいです。
グラテーションを動かしたい
.gradation {
background: linear-gradient(45deg, yellowgreen, lightskyblue);
-webkit-background-clip: text;
color: transparent;
background-size: 200% auto;
animation: gradient-animation 5s ease infinite;
}
@keyframes gradient-animation {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0 0;
}
}@keyframesで背景の位置を左上から右下に移動するようなアニメーションを設定します。
設定したgradient-animationをgradationクラスの追加します。
このとき、background-sizeを大きくしないと動かないので調整してみてください。
infiniteを追加することでループしてくれます。
まとめ
CSSを使って文字にグラデーションを付ける方法をご紹介いたしました。
文字の色で指定することはできませんが、背景色を使ったテクニックを使うことで可能になります。
参考になったら嬉しいです。