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

CSSグラデーション

グラデーションの文字を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を使って指定します。 上下左右の値は下記です。

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

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

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

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

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

See the Pen vYNxOeO by Koji Murakami (@koojy) on CodePen.

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

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

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

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

display: inline-block;

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

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.