模写修行メディア

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

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

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

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

注意!
この記事の方法はIE対応をしていません。IE対応が必要な場合はご自身で調べてみてください。

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

文字のグラデーションのスクリーンショット
<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 系の全プロパティは上の記事で詳しく紹介しています。

background-image プロパティ

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

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

CSSで背景をグラデーションにする方法を解説!

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

display プロパティ

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

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

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


💡 block を指定しない理由

blockとinline-blockのグラデーション反映時の比較画像

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


💡 inline を指定しない理由

inlineとinline-blockのグラデーション反映時の比較画像

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

inlineとinline-blockのグラデーション反映時の比較画像

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なども指定しましょう。

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

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

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

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

CSSアニメーション入門!transitionとanimationを解説!

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

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

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

Vercel

Vercelのトップページのキービジュアル

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

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

Apple

Appleの14インチMacBook Proと16インチMacBook Proの商品ページのキービジュアル

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

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

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

GitHub

GitHubのトップページのキービジュアル

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

DOOR TO THE FUTURE

DOOR TO THE FUTUREのトップページのキービジュアル

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

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

あいはら歯科医院

あいはら歯科医院のトップページのキービジュアル

歯科医院のサイトです。

グラデーションの文字は、svg で作られています。svg であれば IE でも問題なくグラデーションで表示できるはずです。

あいはら歯科医院のトップページのキービジュアル

歯科医院のウェブサイトです。

グラデーションの文字は、svg で作られています。svg であれば IE でも問題なくグラデーションで表示できるはずです。

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

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

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

WebGradients

WebGradientsのトップページのキービジュアル

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

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

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

Gradient Hunt

Gradient Huntのスクリーンショット

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

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

CSS Gradient

CSS Gradientのスクリーンショット

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

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

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

GRADIENT BACKGROUNDS

GRADIENT BACKGROUNDSのスクリーンショット

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

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

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

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

模写修行を見る

この記事を書いた人

Jyuのアイコン

Jyu

空間コーディネーターから独学でプログラミングを学びwebの世界へ。とにかくコーディングが好き。普段は【HTML・CSS / JavaScript / React】を主に書いています。

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材