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

弊社で作った教材がセール中！

udemy セール中

※ 上記リンクからご購入いただければ、割引価格(1,500円)で購入できます。

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス『Hello Mentor』を運営しています。

基礎学習後に迷子になっていませんか？脱初心者したいなら、私たちにお任せください！

基礎学習後にやるべきことがわからない...
スクール卒だけど実力不足だと感じている...
自分のコードが正しい書き方かわからない...
未経験から1人で転職できる気がしない...
独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

受け入れ人数制限あり

詳しく見る

サブスクで入会金・解約金・最低契約期間もなし

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

この記事の目次

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

<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 系の全プロパティは上の記事で詳しく紹介しています。

参考サイト

Can I use - background-clip

background-image プロパティ

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

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

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

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

display プロパティ

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

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

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

block を指定しない理由

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

inline を指定しない理由

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

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

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

基礎学習後にやるべきことがわからない...
スクール卒だけど実力不足だと感じている...
自分のコードが正しい書き方かわからない...
未経験から1人で転職できる気がしない...
独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス『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なども指定しましょう。