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

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

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

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

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

必要なCSSは下記です。

background-image: linear-gradient(135deg, #00c7c5 0%, #0088d7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

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

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

サンプル

紹介したCSSで動かしたものが下記です。

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

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

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

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

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

display: inline-block;

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

この記事をシェアする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。