公開日 2026/11/10

CSSの透明グラデーションはどう作る？3つの実装方法と表示結果を比較

カテゴリー：

Webサイト制作

タグ：

画像の下から背景の柄を透かしたいなら、今回の比較では画像に付けたmask-imageで実現できました。白いグラデーションを重ねる2方式は、画像を白になじませる表現には使えますが、その下にある背景の柄は見えません。同じ素材を使い、背景だけを変えると違いがはっきり出ます。

表は左右にスクロールして比較できます。

方法	白背景の表示	柄背景の表示	今回確認した使い分け
背景画像＋白いグラデーション	白へなじむ	下側が白くなる	白地の装飾用背景画像
疑似要素で白を重ねる	白へなじむ	下側が白くなる	白地に置く画像。重ね順に注意
画像にmask-image	下の白地が見える	下の柄が見える	背景が変わる場所で画像をフェード

同じ素材を白背景と柄背景に置いて比較しました。Safari・Firefox・実機のスマートフォンでは表示を検証していません。

柄背景で3方式を比較。白を重ねる2方式では柄が隠れ、画像へのマスクでは柄が透ける実画面 — 図1：柄背景での実表示。下段は、親要素へのマスクと白→黒のalphaマスクの追加検証です。

「透明にしたい」の対象を先に決める

透明色を使ったグラデーションを指定しても、すべての要素が同じように透けるわけではありません。background-imageは要素の背景を描き、::afterは上に別の面を重ね、mask-imageは要素の見える範囲や透明度を調整します。

今回の「透明」は、下にある別の背景の柄が画像越しに見える状態です。白背景だけで確認すると、「白で隠した状態」と「透明で下の白が見えている状態」を見分けにくいため、背景を切り替えて比較しました。

同じ素材で比較を試す方法

比較デモ（ZIP）をダウンロードし、展開します。
中のdemo.htmlをブラウザで開きます。外部ライブラリやアカウントは不要です。
「白背景」「柄背景」を切り替え、画像の下側と説明文字を見比べます。白で隠す方法と背景を透かす方法の違いを確認してください。

JavaScriptは背景切替と検証条件の表示だけに使用し、グラデーションはCSSで実装しています。

素材は今回制作した600×360のSVGです。元画像の背景は不透明にし、初めから透けている素材を使って結果を取り違えないようにしました。各表示領域は高さ180px、上から40%まではそのまま表示し、残り60%で変化させています。実案件の画像や顧客データは使っていません。

3方式に共通するHTML・CSS

以下は比較デモの主要部分です。3方式とも高さ180px、同じSVG、同じ背景を使います。方法1は背景画像、方法2・3はimgを使います。方法2では説明文字を疑似要素と同じ親に置き、z-indexは指定していません。比較図のカード配置や背景切替ボタンを含む完全版はZIPのdemo.htmlを参照してください。

<div class="stage">
  <div class="visual method1">
    <span class="label">説明テキスト</span>
  </div>
</div>
<div class="stage">
  <div class="visual method2">
    <img src="art.svg" alt="山と太陽">
    <span class="label">説明テキスト</span>
  </div>
</div>
<div class="stage">
  <div class="visual method3">
    <img src="art.svg" alt="山と太陽">
    <span class="label">説明テキスト</span>
  </div>
</div>

.stage {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg,
    #e6c3f6 0 30px, #d2f1dc 30px 60px);
}
/* 白背景の比較時は、上のbackgroundを #fff に変更 */
.visual { position: relative; width: 100%; height: 180px; }
.visual img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.label {
  position: absolute; bottom: 8px; left: 12px;
  padding: 2px 8px; background: #12374d; color: #fff;
  font-weight: bold;
}

方法1：背景画像にグラデーションを重ねる

背景画像に白を重ねた実表示。柄が下部で白く隠れている — 図1の方法1を拡大した実画面。

.method1 {
  height: 180px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, #fff 100%),
    url("art.svg") center / cover;
}

先に書いたグラデーションが画像より手前に描かれます。上側では白の透明度が0なので画像が見え、下へ進むほど白で覆われます。背景画像として使う装飾なら、HTMLに余分な要素を増やさず実装できます。

実表示では、白地には自然になじみました。一方、柄背景に切り替えても下側は白のままです。透明になるのは上に重ねた白の層であり、背景画像そのものの下部ではありません。背景色が変わるコンポーネントにそのまま使うと、白い面が見えてしまいます。また、内容を伝える画像には、代替テキストを持つimgを検討してください。

方法2：疑似要素を画像の上に重ねる

疑似要素の白で画像と文字が覆われた実表示 — 図1の方法2を拡大。文字も白く覆われています。

.method2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 40%, #fff 100%);
  pointer-events: none;
}

<div class="visual method2">…</div>のように画像を囲んで使います。inset: 0は上右下左をすべて0にし、親要素と同じ範囲に疑似要素を配置する指定です。

今回の条件では、画像と「説明テキスト」を同じ親要素内に置き、文字と疑似要素のz-indexを指定していません。その重なり順で疑似要素の白が文字より手前に描かれ、文字も覆われました。疑似要素を使うと必ず文字が消えるわけではありません。画像だけを別の要素で包むか、スタッキングコンテキストも含めて文字と疑似要素の重なり順を設計すると避けられます。

pointer-events: noneは疑似要素によるマウス操作の妨げを避ける指定であり、文字の見え方を直すものではありません。

白背景での実表示。画像部分は3方式とも白へなじむが、疑似要素と親マスクでは説明テキストが薄くなる — 図2：白背景での比較。画像だけでは差が小さく、説明文字の見え方に違いがあります。

方法3：mask-imageで画像そのものを透かす

画像にマスクを付け、柄が透け、説明文字は残っている実表示 — 図1の方法3を拡大。柄と説明文字を確認できます。

.method3 img {
  display: block;
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-mode: alpha;
}

<div class="visual method3"><img src="art.svg" alt="山と太陽">…</div>のように、画像へ直接指定します。この比較では、下側で画像が薄くなり、背後の紫と緑の縞模様が見えました。

白い色を上から足しているわけではないため、背景に合わせてグラデーションの色を変更する必要はありません。

alphaは、マスクの明るさではなく透明度で表示を決める指定です。不透明な黒の部分は画像を表示し、transparentへ近づくほど隠します。CSSグラデーションは既定のmatch-sourceでもalphaとして扱われますが、このサンプルでは比較条件を明確にするため明示しました。

白→黒にしただけでは消えなかった

追加検証では、mask-mode: alphaのままlinear-gradient(#fff, #000)へ変えました。結果は画像全体が表示されたままで、下側は透明になりませんでした。白も黒も不透明だからです。

Illustratorの不透明マスクで使う「白は表示・黒は非表示」という説明を、CSSのalphaマスクへそのまま当てはめないようにしてください。SVGの<mask>参照やluminance指定では扱いが変わります。

文字を残すなら、親ではなく画像へ付ける

画像と文字を包む親の.visualへマスクを付けた追加Aでは、子要素の文字まで薄くなりました。マスクは要素の描画結果へ作用するため、文字のopacity: 1だけでは戻りません。画像へマスクを移し、文字を兄弟要素として配置した方法3では、文字が残ることを確認しました。

表示がおかしいときに確認する順番

柄背景に替える：白で覆っただけか、本当に下の背景が見えているかを判断します。
マスクの指定先を見る：文字やボタンを含む親に付いていないか確認します。
色の終点を見る：alpha方式で消したいなら、不透明な白や黒ではなく透明な色を終点にします。
開発者ツールでcomputed styleを見る：mask-imageがnoneになっていないか、別ルールで上書きされていないか確認します。
実際の利用ブラウザで確認する：接頭辞の併記だけで全環境対応とは判断しません。非対応環境では、フェードしなくても情報が読める設計にします。

マスクで見えなくなった部分も、レイアウト上の場所は残ります。リンクやボタンをマスクで隠して操作を無効化したつもりにせず、必要な情報や操作はフェードの外に配置してください。

どれを選ぶか迷ったら

固定された白い面へ装飾画像をなじませるなら、方法1か2が候補です。背景が写真・柄・ダークモードなどへ変わり、画像そのものを透かしたいなら方法3を検討します。白背景だけの見た目で判断せず、実際に使う背景と文字の組み合わせで確認してください。

画像ファイル自体に透明グラデーションを作りたい場合は、Illustratorでだんだん透明になるグラデーションを作る方法が別の選択肢です。本記事はWebページ上のCSS表示が対象で、PNG等の書き出し結果は検証していません。サイト全体での画像表現や実装を相談する場合は、Web制作の対応内容を確認してください。