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

参考サイト

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でも問題ないです。

【初学者・中級者の方】独学に限界を感じてませんか？

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

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

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

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービス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なども指定しましょう。