mask-imageとは？
CSSの mask-image は、画像やグラデーションを使って要素の表示領域をマスク（切り抜き）するプロパティです。マスク画像のアルファ値に応じて、要素の表示／非表示が決まります（白＝不透明／黒＝透明に見えることが多いです）。SVGやPNGなどを使って自由に形を作れます。
HTML
<div class="masked">
<img src="image01.jpg">
</div>
CSS
.masked {
mask-image: url(mask-shape.svg);
-webkit-mask-image: url(mask-shape.svg); /* Safari対応 */
}
-
準備①（画像）
image01.jpg
-
準備②（切り抜き用画像）
mask-shape.svg
-
完成形
※mask-image使用
グラデーションで簡単マスク
画像を使わなくても、CSSのグラデーションだけでマスクできます。
.masked {
mask-image: linear-gradient(to right, black, transparent);
-webkit-mask-image: linear-gradient(to right, black, transparent);
}
たとえば、要素が左から右にかけてフェードアウトするような効果が簡単に作れます。
実用アイデアいろいろ
- ヒーローエリアの背景画像にマスクで丸みをつける
- スクロールに合わせてマスク範囲を変化させる（GSAPと組み合わせ）
- ロゴや文字を特定の形でくり抜くアニメーション
- 画像を円形、星形など自由な形にカットする演出
clip-path と似ていますが、mask-image はグラデーションも扱えるので、より繊細な表現が可能です。
対応ブラウザ
主要ブラウザは基本対応していますが、Safariでは -webkit-mask-image の指定が必要です。Internet Explorerには対応していないため、使用シーンには注意しましょう。
まとめ
mask-image を使うことで、CSSだけで凝った演出が可能になります。まだあまり使われていない分、差別化にもなります。グラデーションマスクやアニメーションとの組み合わせも楽しいので、ぜひ試してみてください！