グラデーションの文字をCSSだけで｜コピペで使える5種類と、読みやすさを守る使い方

見出しの文字が、青からむらさきへ、なめらかに色を変えていく。こうした「グラデーションの文字」は、画像を作らなくてもCSSだけで作れます。文字は文字のままなので、あとから言葉を書きかえるのも簡単です。

使いどころ

大きな見出しの中の、一番伝えたい言葉1か所に使う。本文や小さな文字、ボタンの文字には使わない。

使う部品は3つです。色の帯を作る linear-gradient()（リニア・グラデーション）、その帯を文字の形で切り抜く background-clip: text（バックグラウンド・クリップ）、そして文字そのものの色を透明にする指定です。

連載「WEBの技術」の3回目です。
1回目のローディング、2回目のボタンに続いて、今回は「文字」の見せ方を取り上げます。

完成見本：グラデーションの文字5種類

下の5つは、どれも画像ではなく、ふつうの文字です。3番目の「色が流れる」は、ページを開いたときから自動で色が流れ続けています。

ホームページ制作

TWO COLORS1. 2色のグラデーション

秋のキャンペーン

THREE COLORS2. 3色・ななめ

新商品のお知らせ

FLOW3. 色が流れる

伝わるデザインで
選ばれる理由をつくる

ACCENT4. 一部の言葉だけ

週末限定セール

SPLIT5. 上下で塗り分け

※ スマホやパソコンで「動きを減らす」設定をオンにしている方には、3番目の色の流れを止めて表示しています。理由は後半の「見る人への配慮」で説明します。

コピペ用のコード

見本ごとに、HTMLとCSSを並べました。HTMLは文字を置きたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。見本ではHTMLに <p> を使っていますが、見出しにするなら <h2> などに書きかえてかまいません。

CSSの前半にある .kd-gt は、5種類に共通する部分です。同じページで何種類か使うときは、1回だけ入れれば足ります。クラス名の頭の kd-gt- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. 2色のグラデーション

左の青から、右の紺むらさきへ。となり合った2色なので、真ん中で色がにごりません。まずはこの形から試すのが分かりやすい、基本の形です。

ホームページ制作

HTML

<p class="kd-gt kd-gt-two">ホームページ制作</p>

CSS

/* 5種類に共通：文字の大きさと、文字の形で背景を切り抜く指定 */
.kd-gt {
  display: inline-block;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .kd-gt {
    font-size: 30px;
  }
}
/* 文字の形で切り抜けるブラウザのときだけ、文字の色を透明にする */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .kd-gt {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.kd-gt-two {
  color: #0369A1;
  background-image: linear-gradient(90deg, #0284C7, #4F46E5);
}

2. 3色・ななめ

むらさき・ピンク・オレンジの3色を、ななめ（135度）に流しています。色を3つ以上並べると、にぎやかな印象になります。キャンペーンや季節のお知らせの見出しに向いています。

秋のキャンペーン

HTML

<p class="kd-gt kd-gt-three">秋のキャンペーン</p>

CSS

/* 5種類に共通：文字の大きさと、文字の形で背景を切り抜く指定 */
.kd-gt {
  display: inline-block;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .kd-gt {
    font-size: 30px;
  }
}
/* 文字の形で切り抜けるブラウザのときだけ、文字の色を透明にする */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .kd-gt {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.kd-gt-three {
  color: #BE185D;
  background-image: linear-gradient(135deg, #9333EA, #DB2777, #EA580C);
}

3. 色が流れる

青とむらさきが、文字の中をゆっくり左から右へ流れ続けます。目に留まりやすい分、1ページに1か所までにします。「動きを減らす」設定の人には、止めて表示します。

新商品のお知らせ

HTML

<p class="kd-gt kd-gt-flow">新商品のお知らせ</p>

CSS

/* 5種類に共通：文字の大きさと、文字の形で背景を切り抜く指定 */
.kd-gt {
  display: inline-block;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .kd-gt {
    font-size: 30px;
  }
}
/* 文字の形で切り抜けるブラウザのときだけ、文字の色を透明にする */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .kd-gt {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.kd-gt-flow {
  color: #0369A1;
  background-image: linear-gradient(90deg, #0284C7, #7C3AED, #0284C7);
  background-size: 200% 100%;
  animation: kd-gt-flow 6s linear infinite;
}
@keyframes kd-gt-flow {
  to {
    background-position: -200% 0;
  }
}
/* 動きを減らす設定の人には、止めて表示する */
@media (prefers-reduced-motion: reduce) {
  .kd-gt-flow {
    animation: none;
  }
}

4. 一部の言葉だけ

見出しの中の、一番伝えたい言葉だけをグラデーションにします。全体は落ち着いた紺のまま、目が行く場所を1つに決められます。

伝わるデザインで
選ばれる理由をつくる

HTML

<p class="kd-gt-line">伝わるデザインで<br><span class="kd-gt kd-gt-accent">選ばれる理由</span>をつくる</p>

CSS

/* 5種類に共通：文字の大きさと、文字の形で背景を切り抜く指定 */
.kd-gt {
  display: inline-block;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .kd-gt {
    font-size: 30px;
  }
}
/* 文字の形で切り抜けるブラウザのときだけ、文字の色を透明にする */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .kd-gt {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.kd-gt-line {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.5;
  color: #0F172A;
}
.kd-gt-line .kd-gt {
  font-size: inherit;
}
.kd-gt-accent {
  color: #0369A1;
  background-image: linear-gradient(90deg, #0F766E, #0284C7);
}

5. 上下で塗り分け

文字の上半分が青、下半分が濃い紺。色の境目をぼかさずに、くっきり分けています。グラデーションの「色の位置」を工夫すると、こうした塗り分けもできます。

週末限定セール

HTML

<p class="kd-gt kd-gt-split">週末限定セール</p>

CSS

/* 5種類に共通：文字の大きさと、文字の形で背景を切り抜く指定 */
.kd-gt {
  display: inline-block;
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .kd-gt {
    font-size: 30px;
  }
}
/* 文字の形で切り抜けるブラウザのときだけ、文字の色を透明にする */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .kd-gt {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.kd-gt-split {
  color: #1E3A8A;
  background-image: linear-gradient(180deg, #0284C7 55%, #1E3A8A 55%);
}

仕組み：背景を、文字の形で切り抜く

グラデーションの文字は、「文字に色を塗っている」のではありません。文字の後ろにグラデーションの背景を敷いて、文字の形の部分だけを見せている、と考えると分かりやすくなります。

1. linear-gradient()：色の帯を作る

background-image: linear-gradient(90deg, #0284C7, #4F46E5);

書いたもの	意味
90deg	色が変わっていく向き。0deg が下から上、90deg が左から右、180deg が上から下
#0284C7, #4F46E5	並べた順に色が変わる。3色以上も書ける

色のうしろに 55% のような数値を書くと、その色が始まる位置を決められます。5番目の「上下で塗り分け」は、2つの色の位置をどちらも55%にしているので、境目でぼかさずに、くっきり切りかわります。

2. background-clip: text：文字の形で切り抜く

background-clip（バックグラウンド・クリップ）は、背景をどこまで描くかの指定です。値を text にすると、背景が文字の形の内側だけに描かれます。

ただ、このままだと文字の色が上に重なって、背景が見えません。そこで -webkit-text-fill-color: transparent で、文字の塗りを透明にします。文字の形の「穴」から、後ろのグラデーションがのぞく仕組みです。

3. @supports：使えないブラウザでは、ふつうの色の文字に

見本では、切り抜きと透明の指定を @supports（サポーツ）で囲んでいます。これは「このブラウザがこの指定に対応しているときだけ使う」という書き方です。対応していないブラウザでは、各見本の color に書いた、ふつうの色の文字で表示されます。

この備えを入れるのには理由があります。文字の色だけ透明になって、切り抜きが効かないと、文字が消えて見えなくなるためです。

対応状況も確認しておきます。MDNの英語版の対応表では、background-clip: text は Chrome と Edge は120から、Safari は14から、-webkit- を付けない書き方で使えます。それより前は -webkit-background-clip の書き方だけが対応していたので、見本では両方を並べて書いています。Firefox は49から使えますが、一部の特別な場合に制限がある「部分的な対応」とされていて、Baseline（主要なブラウザで使えるかの目安）の表示はまだ付いていません（2026年10月8日時点）。

4. display: inline-block：文字の幅に合わせる

共通部分の display: inline-block も大切です。背景は、文字ではなく要素の箱の大きさに合わせて敷かれます。見出しのように横幅いっぱいに広がる要素だと、グラデーションも横幅いっぱいに引き伸ばされ、短い文字には色の一部しか乗りません。次の「数値を変えると」で、違いを並べています。

5. 色が流れる仕組み

3番目は、背景の大きさを background-size: 200% 100% で文字の2倍の幅にして、その背景の位置を @keyframes で少しずつずらしています。グラデーションの最初と最後を同じ青にしているので、1周して戻ったときにつなぎ目が見えません。

数値を変えるとどうなるか

同じコードでも、数値を1つ変えると印象が変わります。

向き：角度

デザイン

90deg
（左→右）

デザイン

135deg
（見本）

デザイン

180deg
（上→下）

90deg は左から右へ、180deg は上から下へ色が変わります。横に長い見出しで180deg にすると、1文字の中で色が変わるので、文字ごとの違いは小さくなります。見本の135deg は、横の変化と縦の変化が両方入るので、短い言葉でも色の変化が見えやすい角度です。

箱の幅：display

見出し

display: block（横幅いっぱい）…文字には青い部分しか乗らない

見出し

display: inline-block（見本）…文字の幅に2色がおさまる

上は、要素が横幅いっぱいに広がっている状態です。グラデーションも横幅いっぱいに伸びるので、左端にある「見出し」の3文字には、青い部分しか乗りません。下のように inline-block にすると、箱が文字の幅まで縮むので、2色がちょうど文字の中におさまります。「グラデーションにしたのに、ほとんど1色に見える」ときは、まずここを確かめます。

色の組み合わせ

デザイン

近い色どうし
青→紺むらさき

デザイン

反対の色
青→オレンジ

デザイン

反対の色
＋ in oklch

青とオレンジのように、色の輪で反対側にある色どうしをつなぐと、真ん中が灰色っぽくにごります。となり合った色どうし（青と紺むらさき）なら、にごりは出ません。

反対の色どうしをつなぎたいときは、linear-gradient(in oklch 90deg, …) のように色の混ぜ方を指定すると、真ん中が鮮やかなまま変わります。この書き方は Baseline で2024年6月から主要なブラウザで使えるとされていますが、比較的新しい機能です。古いブラウザでは指定全体が無視されるので、使うときはふつうの書き方を前の行に書いておくと安心です。

流れる速さ：animation の秒数

デザイン

3秒

デザイン

6秒
（見本）

デザイン

12秒

3秒だと、文字の色がせわしなく入れかわり、読む前に目が動きを追ってしまいます。12秒だと、流れていることに気づかれにくくなります。見本の6秒は、動いていることは分かって、読むのはじゃまをしない速さとして選びました。

スマホと、見る人への配慮

グラデーションの文字は目に留まりやすい分、読みやすさとの両立が大切です。気をつけたいことを4つにまとめます。

グラデーションの「一番薄い色」で、コントラストを確かめる

文字と背景の色の差（コントラスト比）は、ふつうの文字で 4.5:1以上、大きな文字（太字なら約18.7px以上）で 3:1以上 という基準があります。グラデーションの文字は、場所によって色が違うので、一番薄い色で確かめます。

見本の色は、白い背景に対して、どの場所でも3:1以上になるように選びました。たとえば「3色・ななめ」の一番薄いオレンジ #EA580C は約3.6:1で、大きな文字の基準を満たします。一方、KAKERUのブランドカラーの青 #0EA5E9 は白地で約2.8:1なので、見本では一段濃い #0284C7（約4.1:1）を使っています。

グラデーションは、きれいに見せようとすると、つい明るい色を入れたくなります。
文字に使うときは「一番薄いところでも読めるか」を先に決めてから、色を選んでいます。

小さな文字・長い文章には使わない

細い文字や小さな文字では、文字の面積が少ないので、色の変化がほとんど見えません。見えるのは「少し色がまだらな文字」だけです。文章が何行も続く本文に使うと、行ごとに色が変わって、読むリズムが崩れます。見本の文字を40px・太字にしているのは、このためです。

「動きを減らす」設定の人には、止めて表示する

画面の動きで気分が悪くなる人や、動きが気になって集中しにくい人は、スマホやパソコンで「動きを減らす」設定をオンにしていることがあります。iPhoneなら「設定 > アクセシビリティ > 動作 > 視差効果を減らす」です。CSSの prefers-reduced-motion を使うと、この設定がオンの人にだけ別の見た目を出せます。見本の「色が流れる」は、この設定の人には animation: none で流れを止め、グラデーションだけを見せています。

文字は文字のまま

グラデーションの文字は、見た目だけを変えたふつうの文字です。画像の文字と違って、選んでコピーでき、検索の対象にもなり、読み上げの機能でもそのまま読まれます。見出しの文字のためだけに画像を作る場面は、かなり減らせます。

AIに頼むなら

同じような文字は、Claudeなどの生成AIに頼んでもすぐ作れます。そのときは、見た目だけでなく、使う場所・色・配慮まで伝えると、直す回数が減ります。

見出しの中の「選ばれる理由」だけを、青から紺むらさきのグラデーションの文字にしたい。
HTMLとCSSだけで。白い背景で、一番薄い色でもコントラスト3:1以上に。
対応していないブラウザでは、ふつうの青い文字で表示されるようにして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

文字が消える心配はないか。color: transparent だけが書かれていて、@supports のような備えがないときは、対応していないブラウザで文字が見えなくなります
一番薄い色で読めるか。グラデーションの途中に、黄色や水色のような明るい色が入っていたら、白い背景では読みにくくなります
色が1色に見えていないか。見出し全体の幅にグラデーションが伸びていないか、スマホ幅でも確かめます。動かす場合は、動きを減らす設定で止まるかも見ます