Web制作で少し応用的な表現をしたいときに便利なのが、CSSの「mask-image」です。画像やグラデーションを使って、要素の表示範囲をコントロールできるプロパティですが、理解が曖昧なまま使うと意図した見た目にならないことが多いです。
この記事では、mask-imageの本質と、実務で正しく使うための考え方を整理します。
mask-imageとは何か
mask-imageは「表示する部分と隠す部分を定義するプロパティ」です。
重要なのは、「色」ではなく「透明度」で制御する点です。
白（不透明） → 表示される
黒（透明） → 表示されない
グレー（半透明） → 半分だけ表示される
つまり、画像を切り抜くというより「どこを見せるかを決めるフィルター」に近い概念です。
よくある誤解
mask-imageでつまずく原因はほぼこれです。
① 色で制御していると思っている
違います。見ているのは「透明度」です。
たとえば赤でも青でも、不透明なら表示されます。色は関係ありません。
② 背景画像と同じ感覚で使っている
background-imageとは役割がまったく違います。
background-image → 見た目を追加する
mask-image → 見える範囲を削る
ここを混同すると、意図がズレます。
③ 普通の画像なら何でも同じだと思っている
PNGやJPEGをそのままmaskに使うと、思った通りにいかないことがあります。
理由はシンプルで、透明情報がないからです。
maskとして使うなら以下が適しています。
PNG（透過あり）
SVG
グラデーション（linear-gradientなど）
基本的な使い方
最もシンプルな例です。
要素に対してmask-imageを指定します。
.box {
width: 300px;
height: 300px;
background: url(image.jpg) center / cover;
mask-image: linear-gradient(to bottom, black, transparent);
}
この場合、上は表示されて下に行くほど消えていきます。
グラデーションで制御する
実務ではこれが一番よく使います。
mask-image: linear-gradient(
to right,
transparent,
black 30%,
black 70%,
transparent
);
これで「中央だけ表示される」状態になります。
スクロール演出やフェードアウトに使いやすいパターンです。
画像をmaskとして使う
ロゴや特殊な形で切り抜きたい場合はこちらです。
mask-image: url(mask.png);
mask-size: cover;
mask-repeat: no-repeat;
mask-position: center;
このとき重要なのは、mask画像側の設計です。
表示したい部分 → 白
隠したい部分 → 透明
これが逆だと、全部消えたりします。
SVGとの相性
より細かい制御をしたいならSVGが最適です。
理由は以下です。
パスで自由に形を作れる
アニメーションと相性がいい
解像度に依存しない
特に「手書き風アニメーション」などは、mask＋SVGで構成されることが多いです。
実務での使いどころ
mask-imageは「見た目をちょっと良くするため」に使うものではありません。
用途はかなり限定されます。
向いているケース
フェードアウト演出
画像の一部だけ見せる
スクロールに応じた表示制御
複雑な形状の切り抜き
向いていないケース
単純な角丸（border-radiusで十分）
影や装飾（box-shadowでいい）
単なる画像表示
ここを間違えると、無駄に複雑なコードになります。
ブラウザ対応の注意点
mask-imageは環境によって挙動が変わることがあります。
特に注意すべきはこれです。
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
Safari対策として、webkitプレフィックスはほぼ必須です。
これを忘れると「自分の環境では動くのに本番で崩れる」典型的な事故になります。
結論
mask-imageは強力ですが、使いどころを間違えるとただの無駄な複雑化になります。
重要なのはこの3つです。
透明度で制御していると理解する
backgroundとは別物として考える
必要な場面だけ使う
見た目を作るためではなく、「見せ方を制御するための道具」として使うのが正しい理解です。
ここを外さなければ、実務でも十分に使いこなせます。
