CSS mask-imageの使い方 — グラデーションマスクとフェードアウト効果
CSS mask-imageは要素に「マスク」をかけて表示・非表示を制御するプロパティです。グラデーションをマスクに使うと要素の端を徐々にフェードアウトさせる効果を作れます。画像・テキスト・動的コンテンツに独自の視覚表現を加える手法として活用されています。
mask-imageとclip-pathの違い
mask-imageは透明度（アルファ）によって要素の表示を制御します。白（不透明）の部分は表示され、黒（透明）の部分は非表示になります。これに対しclip-pathは形状の内側か外側かで表示を決定し、透明度のグラデーションは作れません。フェードアウトのような滑らかな表示/非表示にはmask-imageが必要です。
グラデーションマスクの書き方
mask-image: linear-gradient(to bottom, black 0%, transparent 100%) で上から下に向かってフェードアウトします。mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%) で両端をフェードさせ中央だけ表示するマスクになります。横スクロールコンテナの端に使うと自然なフェード効果を作れます。
-webkit-プレフィックスの必要性
CSS Maskの実装状況はブラウザによって異なります。特にSafari（WebKit系）では-webkit-mask-imageが必要です。CSS Mask Generatorはmask-imageと-webkit-mask-imageの両方を出力するため、Safari・Chrome・Firefoxを含む主要ブラウザに対応したコードが得られます。
複数マスクの重ね合わせ
CSS maskは複数のマスクをカンマ区切りで重ねられます。横方向と縦方向のグラデーションマスクを組み合わせて四辺フェードを作れます。mask-composite: excludeなどのコンポジット操作でマスクの合成方法を変えることも可能です。CSS Mask Generatorは最大3つのマスクレイヤーに対応しています。