How to
CSSで文字色をグラデーションにする方法
グラデーションの文字をCSSで実装したいと思ったことはありませんか?
文字をグラデーションにするには画像を使わないといけない時代もありましたが、現在ではCSSで簡単に文字をグラデーションにできます。
今回はCSS3のプロパティを使うことで文字をグラデーションにする方法を紹介します。
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;
でインライン要素にして端を合わせてしまうのがいいですね。