CSSで文字色をグラデーションにする方法

グラデーションの文字をCSSで実装したいと思ったことはありませんか？

文字をグラデーションにするには画像を使わないといけない時代もありましたが、現在ではCSSで簡単に文字をグラデーションにできます。

今回はCSS3のプロパティを使うことで文字をグラデーションにする方法を紹介します。

目次

1. CSSで文字の切り抜きと透過
   1. グラデーションの向き
2. CSSでグラデーションを実装したサンプル
3. ブロック要素に適用する場合は注意が必要

CSSで文字の切り抜きと透過

実装の方法は文字の背景をグラデーションにするのと合わせて、文字の形に切り抜いて文字色を透過することで実現できます。

必要なCSSは下記です。

1
2
3
background-image: linear-gradient(グラデーションの方向, 色1 0%, 色2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

-webkit-text-fill-colorのところは下記のようにrgbaで透過にしても実現できます。

1
color: rgba(0, 0, 0, 0);

グラデーションの向き

グラデーションの方向はdegを使って指定します。
上下左右の値は下記です。

• 左から右：90deg
• 右から左：270deg
• 上から下：0deg
• 下から上：180deg

左右と上下は色の順番を入れ替えることでも、大丈夫です。

上下左右だけでなくdegの指定によって斜めのグラデーションも実現可能です

CSSでグラデーションを実装したサンプル

実際にCSSでグラデーションをやってみたので、コードと合わせて見てみてください。

@[codepen](https://codepen.io/koojy/pen/PvgjrP/)

ブロック要素に適用する場合は注意が必要

文字色をグラデーションにするのはあくまでも背景色をグラデーションにしたものをくり抜いています。

もしdivなどのブロック要素に適用する場合はテキストの端がグラデーションの端ではないということを意識しておきましょう。

サンプルのコードにも入れているようにもしブロック要素に適用する場合は

1
display: inline-block;

でインライン要素にして端を合わせてしまうのがいいですね。