エフェクト
mask-mode
mask-mode は、マスクの画像の透明度と明るさのどちらを使って要素を隠すかを指定します。luminance にすると、白い所は見えて黒い所は隠れる、明るさのマスクになります。
構文
<masking-mode>#
<masking-mode> = alpha | luminance | match-sourceプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
mask-image: linear-gradient(to right, #ffffff, #000000);
mask-mode: luminance;
}コントロール
mask-modeluminance
解説
3 つの値
alpha：画像の透明度を使います。不透明な所は見え、透明な所は隠れます。色は関係ありません。luminance：画像の明るさを使います。白い所は見え、黒い所は隠れ、灰色の所は半分透けます。透明な所は黒と同じく隠れます。match-source：初期値です。mask-imageが SVG の<mask>要素を指すときは、その要素のmask-type（初期値は明るさ）に従い、画像やグラデーションのときはalphaになります。
白黒の画像をそのままマスクにする
透明な所の無い白黒の画像は、alpha ではどこも不透明なので何も隠れません。luminance にすると、白黒の濃さがそのまま見え方になります。このページのプレビューでは、白から黒へのグラデーション（linear-gradient(to right, #ffffff, #000000)）をマスクにしているので、luminance では右へ行くほど消えていきます。
気をつけること
- カンマで区切ると、
mask-imageの層ごとに指定できます。 - Safari には、SVG の
<mask>要素をマスクにしたときに明るさではなく透明度で読む不具合があり、luminanceがいつも期待どおりに効くとは限りません。 - Chrome・Edge は 120、Safari は 15.4 から使えます。