【デモ多数】background-clip: text の基本とアニメーション応用まで徹底解説！

Webサイトのデザインでは、テキストに視覚的なインパクトを持たせることが求められます。例えば、以下のようなデザインを見たことがありませんか？

このような表現を実現するには、通常の color プロパティでは対応できません。また、CSSの background プロパティを適用しても、テキスト自体には背景が反映されません。

こうした「テキストの形に沿って背景を適用する」デザインを可能にするCSSが、background-clip: text; です。このプロパティを使うことで、次のようなスタイリングが簡単に実装できます。

• グラデーションを適用したカラフルなテキスト
• 背景画像をテキストの形に切り抜くデザイン

本記事では、background-clip: text; の基本的な使い方から、アニメーションを活用した応用テクニックまでを詳しく解説 します。また、clip-path や mask-image との違い、ブラウザ対応状況についても触れ、実務での活用方法がしっかり理解できるように構成しています。

みなと

background-clip: text; を活用して、より洗練されたWeb表現を実現しましょう！

background-clip とは？

CSSの background-clip プロパティは、要素の背景（background）がどの範囲まで適用されるかを指定するプロパティ です。

通常、背景は要素全体に適用されますが、background-clip を使うことで、「ボーダーの外側まで表示するのか？」「コンテンツ部分だけに適用するのか？」など、背景の適用範囲を細かく制御できます。

background-clip の主な値

background-clip には、以下のような4つの主な値があります。

基本的な適用例

実際に background-clip を使うと、背景がどの範囲に適用されるのかをコントロールできます。

HTML

<div class="box border-box">
  <p class="box-title">border-box</p>
  <p class="box-text">ボーダーの外側<br class="only-sp">まで背景を適用</p>
</div>
<div class="box padding-box">
  <p class="box-title">padding-box</p>
  <p class="box-text">パディングの外側<br class="only-sp">（ボーダーの内側）<br class="only-sp">まで背景を適用</p>
</div>
<div class="box content-box">
  <p class="box-title">content-box</p>
  <p class="box-text">コンテンツの外側<br class="only-sp">（パディングの内側）<br class="only-sp">まで背景を適用</p>
</div>

CSS

@media (min-width: 552px) {
  .only-sp {
    display: none;
  }
}

.box {
  border: 10px dashed #000;
  padding: 30px;
  background: url(background.webp) no-repeat center / cover;
  background-origin: border-box;
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  margin-top: 20px;
  background-clip: padding-box;
}

.content-box {
  margin-top: 20px;
  background-clip: content-box;
}

@media (min-width: 552px) {
  .box-title {
    font-size: 48px;
    line-height: 1.3;
  }
}

@media (max-width: 551px) {
  .box-title {
    font-size: 30px;
    line-height: 1.4;
  }
}

.box-text {
  margin-top: 10px;
}

@media (min-width: 552px) {
  .box-text {
    font-size: 22px;
    line-height: 1.4;
  }
}

@media (max-width: 551px) {
  .box-text {
    font-size: 16px;
    line-height: 1.5;
  }
}

このように background-clip を変更することで、背景の表示範囲を調整できるため、デザインの細かなコントロールが可能になります。

スワン

background-clip: text; は、次のセクションから詳しく解説していきます！

background-clip: text; の実装方法

通常、CSSの background プロパティを指定すると、要素全体に背景が適用されます。しかし、background-clip: text; を使うと、テキストの形状に合わせて背景を限定的に表示することができます。これにより、グラデーションや背景画像をテキストの形に沿って適用するデザインが簡単に実装できます。

ここでは、この記事の冒頭でも紹介した「背景画像を切り抜いたテキスト」の実装方法を詳しく解説します。

ステップ1：通常のテキスト

まず、背景に画像を指定し、通常のテキストとして表示します。この時点では、テキストの後ろに背景画像が適用されている状態で、特別な処理は行われていません。

HTML

<div class="image-text-wrap">
  <p class="image-text">背景画像が<br>テキストの輪郭に沿って<br>表示されるデザイン</p>
</div>

CSS

.image-text-wrap {
  display: flex;
  justify-content: center;
  border-radius: 4px;
  background: rgba(68, 102, 206, 0.09);
}

@media (min-width: 552px) {
  .image-text-wrap {
    padding: 30px 0;
  }
}

@media (max-width: 551px) {
  .image-text-wrap {
    padding: 25px 0;
  }
}

.image-text {
  background: url(background.webp) no-repeat center / cover;
  font-weight: 900;
  text-align: center;
}

@media (min-width: 552px) {
  .image-text {
    font-size: 50px;
    line-height: 1.35;
  }
}

@media (max-width: 551px) {
  .image-text {
    font-size: 28px;
    line-height: 1.4;
  }
}

みなと

背景画像はあるけど、テキストにはまだ影響なし！ただの普通のテキストです。

ステップ2：background-clip: text; を適用

次に、background-clip: text; を適用します。これにより、背景の適用範囲が「テキストの形」に制限されるようになります。しかし、この状態ではまだテキストの色が優先されるため、背景画像は見えなくなります。

CSS

.image-text {
  background-clip: text;
}

みなと

背景はテキストに適用されたけど、文字色が邪魔をしています。

ステップ3：-webkit-text-fill-color: transparent; を適用

最後に、-webkit-text-fill-color: transparent; を適用します。これはテキストの塗り（文字色）を透明にするCSSプロパティです。これにより、テキストの色を透明にして、背景画像が文字の形に沿って表示されるようになります。

CSS

.image-text {
  -webkit-text-fill-color: transparent;
}

みなと

やっと完成！テキストの形に背景画像がぴったり適用されました！

clip-path / mask-image との違い

background-clip: text; は、テキストの形状に沿って背景を適用するCSSプロパティですが、同じように要素の形状を制御する方法として clip-path や mask-image があります。

これらは一見似ていますが、適用の仕組みや表現できるデザインが異なるため、適切に使い分けることが重要です。

3つの違いを比較

背景の適用範囲を制御する background-clip: text; に対し、clip-path は要素そのものの形を変更し、mask-image は透過表現を可能にします。

それぞれの特徴と活用シーン

background-clip: text;

background-clip: text; は、テキストの形状に沿って背景を適用できるプロパティです。この機能を活用すると、テキストにカラフルなグラデーションを適用したり、背景画像をそのまま文字の形に切り抜いたりすることができます。

特に、Webサイトのタイトルや見出しなどで、CSSだけでおしゃれなタイポグラフィを作りたい場合に便利です。

clip-path

clip-path は、要素の形をカット（トリミング）できるプロパティです。polygon() や circle() などの形状を指定することで、要素を自由な形に切り抜くことができます。

例えば、ボタンや画像の角を丸くしたり、星型や斜めカットのデザインを作成したりするのに適しています。テキストの形状に沿って背景を適用したい場合は background-clip: text; の方が適していますが、要素そのものの形を変えたい場合は clip-path が有効です。

みなと

clip-path について詳しく知りたい方は、以下の記事で基本的な使い方から実践的な応用例まで解説しています。興味のある方はぜひ参考にしてください！

あわせて読みたい

CSSで複雑な形も簡単設定！実務でも使えるclip-pathの基本形状と応用例を紹介

mask-image

mask-image は、要素に透過マスクを適用するプロパティです。要素を完全にカットする clip-path とは異なり、透明度を調整できるのが特徴です。

グラデーションや透過画像（PNG, SVG など）を利用することで、要素が徐々に消えるフェード効果や、clip-path ではできない滑らかな透過表現が可能になります。

みなと

mask-image を活用した透過表現については、こちらの記事で詳しく紹介しています。フェード効果や画像の一部を透過させるテクニックに興味がある方は、ぜひチェックしてみてください！

あわせて読みたい

maskプロパティの使い方完全ガイド！CSSで実務に役立つ活用例

応用テクニック

background-clip: text; を使うことで、テキストに背景を適用できるだけでなく、動きを加えることで、より視覚的にインパクトのあるデザインを実現できます。特に、グラデーションの変化をアニメーションさせることで、静的なデザインとは一味違う、魅力的なエフェクトを作ることができます。

ここでは、CSSアニメーションを使ってテキストの背景グラデーションが流れるように動くデザインを紹介します。

動きを確認しよう

まずは、実際にグラデーションがアニメーションする様子を確認してみましょう。

みなと

テキストの中で、カラフルなグラデーションが横へスライドしている様子が確認できます！

実装方法

このアニメーションは、CSSの @keyframes を活用して background-position をスムーズに変化させることで、グラデーションが流れるように見える仕組みになっています。以下のコードを使えば、簡単に同じ動きを実装できます。

HTML

<div class="gradient-text-wrap">
  <p class="gradient-text">応用テクニック<br>CSSアニメーションで<br>グラデーションを動かす</p>
</div>

CSS

@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.gradient-text-wrap {
  display: flex;
  justify-content: center;
  border-radius: 4px;
  background: rgba(68, 102, 206, 0.09);
}

@media (min-width: 552px) {
  .gradient-text-wrap {
    padding: 30px 0;
  }
}

@media (max-width: 551px) {
  .gradient-text-wrap {
    padding: 25px 0;
  }
}

.gradient-text {
  background: linear-gradient(90deg, #ff9364, #ffb330, #42ba72, #1aa5d3, #ff9364, #ffb330, #42ba72, #1aa5d3, #ff9364);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  font-weight: 900;
  text-align: center;
  animation: gradient-move 5s linear infinite;
}

@media (min-width: 552px) {
  .gradient-text {
    font-size: 50px;
    line-height: 1.35;
  }
}

@media (max-width: 551px) {
  .gradient-text {
    font-size: 28px;
    line-height: 1.4;
  }
}

コードのポイント

このコードでは、どのようにスムーズなアニメーションを実現しているのか？ 3つのポイントに分けて解説します。

1. 背景グラデーションの準備

通常の linear-gradient では、始点と終点が異なるため、背景がループしたときに色のつながりが不自然になり、カクッとした違和感が生じます。これを防ぐために、グラデーションの始点と終点の色が同じになるように設定し、それを2回繰り返して指定します。

次に、background-size: 200% 100%; を指定し、要素の2倍の幅で背景を表示します。この指定と2回繰り返すことで、初期状態ではちょうど1回分のグラデーションが要素内に収まり、もう1回分は画面外に待機する形になります。

2. グラデーションをスムーズに移動させる

CSSアニメーションで background-position を変化させ、グラデーションが横方向に流れるようにします。ここでは @keyframes を使って、background-position: 0% → 100% に移動するよう設定しています。アニメーションが進むにつれて、背景グラデーションが左側へスライドし、テキストの背景が変化していく様子が分かります。

3. ループアニメーションの仕組み

5秒間のアニメーションが完了すると、背景が元の位置に戻って次のループが開始されます。このとき、背景グラデーションを2回繰り返して指定し、background-size: 200% 100%; を設定しているため、背景が 100% の位置に到達したときに、最初の状態とぴったり重なる構造になっています。これにより、無限に流れ続けるような視覚効果が生まれます。

この仕組みを理解することで、途切れのない滑らかなアニメーションを作ることが可能になります。

みなと

グラデーションの色やスピードを調整することで、さまざまなバリエーションを作ることができるので、ぜひ活用してみてください！

ブラウザ対応状況

以前は background-clip: text; はWebKit系ブラウザ（Chrome、Safariなど）でのみ部分的にサポートされており、-webkit-background-clip: text; を指定しなければ動作しませんでした。

しかし、現在の主要ブラウザ（Chrome・Edge・Safari など）では、標準の background-clip: text; がサポートされるようになり、プレフィックスなしでも動作する環境が増えています。

実際の動作確認

この記事で紹介した background-clip: text; を含むすべての background-clip の指定について、私が所有するPC・スマホ・タブレットの全ブラウザで動作を検証しました。その結果、すべての環境で -webkit- なしでも問題なく適用されることを確認しました。

所有環境と動作結果（2025年2月現在）

古い環境では -webkit- が必要な場合も

最新のブラウザでは background-clip: text; が標準サポートされているため、-webkit- プレフィックスなしでも問題なく動作します。ただし、数年前のバージョンを使用している環境では -webkit-background-clip: text; が必要な場合があるため、より幅広い環境でのサポートを考えるならプレフィックスをつけておくと安心です。

まとめ

background-clip: text; を使えば、テキストにグラデーションや背景画像を適用できます。-webkit-text-fill-color: transparent; と組み合わせることで、正しく表示されるのがポイントです。

本記事では基本の使い方から、clip-path や mask-image との違い、アニメーションを使った応用例まで紹介しました。主要ブラウザでも問題なく動作するので、デザインのアクセントとしてぜひ活用してみてください！

みなと

フロントエンドエンジニア

X

東京のWeb制作会社で15年以上働いている現役フロントエンドエンジニアです。これまで、いろんなプロジェクトに関わりながら、フロントエンド開発やWebデザインに取り組んできました。このブログでは、今までの経験を活かして、Web制作に役立つ情報やノウハウをシェアしていきたいと思います。初心者の方から、現場で働く方まで、誰でも参考にできる内容をお届けしますので、ぜひ覗いてみてください。