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

この記事では文字をグラデーションにする方法を解説します。グラデーションは使い方によっては、表現の幅が広がるので、ぜひ学んでみてください。

• 文字をグラデーションにする方法
• 文字の背景を画像にする方法
• 文字のグラデーションにアニメーションを入れる方法

上の項目に加え、グラデーションを採用しているサイトや便利なジェネレーターも紹介します。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

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

<p class="text">グラデーションテキスト</p>

.text{
    font-size: 72px;
    font-weight: bold;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #b465da 0%, #cf6cc9 33%, #ee609c 66%);
    display: inline-block;
}

文字のグラデーションを作るための全コードです。これ以降、グラデーションに関わる重要な箇所のみ解説します。

-webkit-background-clip と color プロパティ

-webkit-background-clipは、背景の配置領域を設定するプロパティです。ベンダープレフィックス(webkit)が必要です。

• -webkit-background-clip の値に text を指定する
• color を透明(transparent)にする

この組み合わせで指定すると、文字にbackground-imageで指定した背景(グラデーション)が反映されます。テキストに沿って背景画像を切り取っていると考えると良いかもしれません。

background 系の全プロパティは上の記事で詳しく紹介しています。

background-image プロパティ

linear-gradientを利用して、背景をグラデーションにしています。

background-image: linear-gradient(値);の値を変更すれば、色々なバリエーションのグラデーションが作れます。

グラデーションの詳しい作成方法は、上の記事をご覧ください。

display プロパティ

display: inline-block;を指定します。

• block を指定しない
• inline を指定しない

これらの理由を紹介します。

block を指定しない理由

文字の長さとグラデーションの長さが同じ方が、グラデーションが綺麗に反映されます。blockにすると背景の横幅が 100%になってしまいます。

inline を指定しない理由

inlineを指定すると、Safari で改行されたテキストが表示されなくなるバグがあります。必ず 1 行に収まるようなテキストの場合は、inlineでも問題ないです。

inlineを指定すると、Safari などで、改行されたテキストが表示されなくなるバグがあります。必ず 1 行に収まるようなテキストの場合は、inlineでも問題ないです。

文字の背景を画像にする方法

これまでのコードを少し変更するだけで、上の画像のように文字にbackground-imageで指定した背景画像を反映させることができます。

指定する画像

今回は、上の画像を使用します。

コード解説

<p class="text">画像テキスト</p>

.text{
    font-size: 72px;
    font-weight: bold;
    color: transparent;
    -webkit-background-clip: text;
    background-image: url(../img/text-image.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
}

全体のコードです。

文字をグラデーションにする際は、linea-gradientを利用しましたが、画像を指定する場合は、url(画像パス) とします。

必要であれば、background-repeat / background-position / background-sizeなども指定しましょう。

文字のグラデーションにアニメーションを入れる方法

animationとkeyframesを使って、文字のグラデーションにアニメーションをつけることができます。

background-sizeで背景のサイズを大きくしておく点に注意してください。

CSS アニメーションは、下の記事で詳しく解説しています。

文字のグラデーションが採用されているサイト紹介

文字のグラデーションを採用しているサイトを紹介します。

今回紹介するサイトのグラデーションは、linear-gradient以外にも svg や画像で実装されているものも含みます。

Vercel

Vercel は Next.js を開発している会社が提供するホスティングサービスです。

文字のグラデーションを順に切り替えることで、インパクトのあるキービジュアルになっています。

Apple

Apple は、よくグラデーションを使う印象があります。

スクロールに応じてグラデーションを変化させている箇所もあります。洗礼された Apple らしさが演出されているように感じます。

スクロールに応じてグラデーションを変化させている箇所もあります。グラデーションとスクロールを連動させることで、洗礼された Apple らしさが演出されているように感じます。

GitHub

GitHub も Apple 同様に、グラデーションを使うことで、ブランドイメージを反映しているように感じます。

DOOR TO THE FUTURE

国内観光・宿泊施設をオンライン上で VR 回遊体験できるサイトです。

背景のグラデーションは、画像で作られています。

あいはら歯科医院

歯科医院のサイトです。

グラデーションの文字は、svg で作られています。

グラデーションジェネレーター紹介

グラデーションを使用する場合のカラーの選択はセンスや経験が必要です。

ジェネレーターを使用すれば、デザインが苦手な方でも良い感じのグラデーションにできるのでおすすめです。

WebGradients

ワンクリックでグラデーションの CSS をコピーできる一覧サイトです。180 種類あり、サイトで使いやすいカラーが揃っています。

グラデーションを png の画像でダウンロードすることができます。

また、グラデーションを png の画像でダウンロードすることができます。

Gradient Hunt

操作がシンプルで使いやすいサイトです。

サンプル数も多く、ヘッダーから Linear や Radial など、絞り込むこともできます。また、Create Gradient からオリジナルのグラデーションの作成もできます。

CSS Gradient

細かな値を設定し、グラデーションを作成できます。

カラー数の追加や削除も可能で、細部までこだわったオリジナルのグラデーションが作成できます。

画像をアップロードし、そこからカラーを抽出してグラデーションを作成することもできます。

GRADIENT BACKGROUNDS

グラデーション関連のツールがまとまっている便利なサイトです。

左のタブからツールの切り替えができます。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！