CSSグラデーションの作り方｜自然に見せるコツとよくある失敗

CSSのグラデーションは linear-gradient() や radial-gradient() を書くだけで一見簡単ですが、いざ使うと「思ったより角度が合わない」「色の境目が縞模様になる」「枠線に適用できない」といったつまずきが起きやすいプロパティです。この記事では基本構文に加えて、公式ドキュメントにはあまり書かれていない実務上の落とし穴を中心にまとめます。

linear-gradient の基本構文

background: linear-gradient(135deg, #667eea, #764ba2);

角度・色1・色2をカンマ区切りで指定するだけです。色は3つ以上並べることもでき、それぞれに位置（%）を指定できます。

background: linear-gradient(
  90deg,
  #ff6b35 0%,
  #f7c59f 60%,
  #ffffff 100%
);

位置を省略すると等間隔に自動配置されますが、特定の位置で色を切り替えたい場合は%を明示する必要があります。

radial-gradient の基本構文

background: radial-gradient(circle, #11998e, #38ef7d);

中心から外側へ円形（または楕円形）に広がるグラデーションです。circle の代わりに ellipse を指定すると、要素の縦横比に合わせた楕円形になります。位置を変えたい場合は radial-gradient(circle at 30% 20%, ...) のように at で中心をずらせますが、これは手書きで追加する必要がある指定で、詳しくは後述のツールの制約でも触れます。

角度の考え方でつまずきやすい点

linear-gradient の角度は、時計の針のような直感とズレやすい部分です。

0deg が「真上向き」である点が最も誤解されやすいところです。 数値指定に慣れていないうちは、to bottom のようなキーワード指定のほうが直感的で事故が少なくなります。

色を自然に見せるコツと「縞模様」問題

グラデーションを2色だけで作ると、色相・明度が離れているほど境界がバンド状（縞模様）に見えることがあります。これはディスプレイの色表現の段階数が原因で起きる現象で、CSSの書き方のミスではありません。

対処法は次の3つです。

1. 色相環で近い色同士を選ぶ（赤→オレンジのように隣接色にする）
2. 中間色を1つ挟む（3色構成にして急激な変化を避ける）
3. 彩度・明度の差を小さくする（同系色でグラデーションを組む）

派手に見せたい場合ほど縞が目立ちやすいため、「色数を増やして緩やかにする」のが最も手軽な対処です。

テキストにグラデーションをかける

見出しなどにグラデーションを適用したい場合は、背景として敷いた上でテキストにクリップします。

.gradient-text {
  background: linear-gradient(90deg, #ff6b35, #f7c59f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

-webkit- の接頭辞は現時点でも必要になる環境があるため、両方書いておくと安全です。color: transparent を忘れると、グラデーションの上に元の文字色がそのまま乗って見えなくなるので注意してください。

なお、文字色を透明にする都合上、一部の自動チェックツールでは文字色と背景のコントラスト比を正しく判定できないことがあります。重要な情報をグラデーション文字だけで表現しないほうが安全です。

【落とし穴】border に直接グラデーションは使えない

CSSに慣れていても意外と知らないのが、次のコードが動かないということです。

/* これは効かない */
.box {
  border: 4px solid;
  border-color: linear-gradient(135deg, #667eea, #764ba2);
}

border-color は色（<color>値）しか受け付けず、グラデーションのような画像値は指定できません。枠線にグラデーションをかけるには、次のどちらかの方法を使います。

方法1：border-image を使う

.box {
  border: 4px solid transparent;
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

手軽ですが、border-radius と組み合わせたときに角が丸くならない場合があります。

方法2：背景を二重にする（角丸にも対応）

.box {
  border: 4px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #667eea, #764ba2) border-box;
}

padding-box と border-box を使い分けて背景を2枚重ねる方法です。角丸の枠線グラデーションが必要な場合は、こちらのほうが確実に動作します。ただし要素の背景色をこの2枚の背景で占有するため、別の背景画像を重ねたい場合は競合する点に注意してください。

ダークモードでは彩度をそのまま使わない

ライトモード用に作った鮮やかなグラデーションを暗い背景にそのまま乗せると、周囲との明度差が大きすぎて浮いて見えたり、逆に沈んで見えづらくなったりします。CSS変数と prefers-color-scheme を組み合わせ、モードごとに彩度・明度を調整した色を用意するのが安全です。

:root {
  --grad-start: #667eea;
  --grad-end: #764ba2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grad-start: #4c5fd1;
    --grad-end: #5c3a85;
  }
}
.box {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
}

影の扱い方についても同様の考え方が必要です。あわせてbox-shadowで自然な影をつけるコツも参照してください。

ツールで手早く作る

数値を頭の中で調整するより、プレビューを見ながら決めるほうが速く正確です。CSSグラデーション生成ツールでは、線形・放射状の切り替え、角度のスライダー調整、色の追加・削除、プリセットからの選択、生成したCSSのコピーができます。

ただし、このツールが出力する放射状グラデーションは中心固定の円形（circle）のみに対応しています。楕円形（ellipse）にしたい場合や、中心位置を at 30% 20% のようにずらしたい場合は、コピーしたコードに手を加える必要があります。 また conic-gradient（円錐形グラデーション）や、模様を繰り返す repeating-linear-gradient にも対応していないため、これらが必要な場合は基本構文を踏まえて手書きしてください。

色の微調整にはカラーコード変換ツールでHEX・RGB・HSLを相互変換すると、彩度や明度だけを揃えたいときに便利です。box-shadowと組み合わせて立体感を出す場合はCSSボックスシャドウ生成ツールも参照してください。

まとめ

1. linear-gradient の角度は 0deg が真上向き。迷ったらキーワード指定（to right など）を使う
2. 色相・明度が離れた2色だけだと縞模様になりやすい。中間色を挟むか同系色でまとめる
3. テキストへの適用は background-clip: text と color: transparent をセットで使う
4. border-color にグラデーションは指定できない。 border-image か背景の二重指定で代替する
5. ダークモードでは彩度・明度を調整した別カラーを用意する
6. ツールは放射状が中心固定の円形のみ対応。楕円・中心移動・円錐形は手書きが必要