😀

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

2019/06/05に公開

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

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

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

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

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

必要なCSSは下記です。

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

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

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

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

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

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

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

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

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

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

display: inline-block;

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