KJ DEV
How to

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;

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

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。