模写修行メディア

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

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

文字のグラデーションのスクリーンショット
<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でも問題ないです。

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

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

文字の背景を画像にしたスクリーンショット

これまでのコードを少し変更するだけで、上の画像のように文字に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 で作られています。

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

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

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

WebGradients

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

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

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

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

Gradient Hunt

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

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

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

CSS Gradient

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

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

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

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

GRADIENT BACKGROUNDS

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

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

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

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Tatsukiのアイコン

Tatsuki

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

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材