グラデーション背景が表示されない・縞模様になるときの対処

そもそも表示されないときの構文確認

linear-gradientはbackgroundまたはbackground-imageに指定する画像であり、background-colorには使えません。background-colorに書いていると無効になり、無地のままになります。

色を2つ以上指定しているか、カンマや単位の書き方が正しいかも確認しましょう。linear-gradient(to right, #fff, #000)のように方向と複数の色を正しく並べる必要があります。

要素のサイズと重なりで見えないことも

グラデーションは効いていても、要素に高さがなければ面積が生まれず見えません。背景を付けた要素のheightやmin-heightを確認してください。インライン要素や中身が空の要素で起きがちです。

前面に別の背景や要素が重なって隠している可能性もあります。z-indexや重なり順、上に乗っている不透明な背景の有無を見直すと原因が分かることがあります。

症状別チェック表

グラデーション背景が表示されない・縞模様になるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

縞模様（バンディング）が出る理由と緩和

バンディングは、隣り合う色の差を画面の色数で滑らかに表現しきれず、境界が縞に見える現象です。特に近い色どうしの広い面積のグラデーションや、暗い色の領域で目立ちます。CSSの誤りではなく表示上の限界に近い現象です。

緩和策としては、中間色のカラーストップを増やして色変化をなだらかにする、グラデーションの方向や範囲を調整する、わずかなノイズを重ねるといった手法があります。完全には消せない場合もあると理解しておくと判断が楽です。

原因を切り分ける手順

表示されない場合とバンディングは原因が別なので、まず症状を見極めてから進めます。

1. linear-gradientをbackgroundまたはbackground-imageに書いているか確認する
2. 色を2つ以上、正しい構文で指定しているか確認する
3. 要素にheightやmin-heightがあり面積があるか確認する
4. 上に重なる背景や要素で隠れていないか確認する
5. 縞が出るならカラーストップを増やすなど段差を緩和する

見え方はディスプレイ差を含めて確認する

バンディングはディスプレイの性能や明るさ設定によって見え方が変わります。自分の画面では目立たなくても、別環境では縞がはっきり出ることがあります。複数の環境で実際の表示を見比べて許容範囲を判断するのが確実です。

ギガサイト便なら、検証用ページをドロップして発行した〇〇.giga-site.comのURLを各自の端末で開き、ディスプレイ差を含めた見え方を集められます。CDNのエッジ配信で表示が速く、同じURLのままカラーストップを差し替えながら詰められます。社外に見せたくない検証は認証を併用しましょう。