CSS

mask-image lets you “cut out” what part of an element is visible by using an image or a gradient, where the transparency controls how much you can see.

mask-image

mask-image は「要素の見える部分だけを“型抜き”するための画像（またはグラデーション）を指定して、透明〜不透明の濃さで“どこをどれだけ見せるか”をコントロールできる機能」です。

mask-image の全体像

clip-path が「線でバッサリ切る（内側だけ残す）」だとしたら、mask-image は「透明度で“じわっと”切る（薄いところは半分だけ見せる）」ができます。

マスクの“白っぽい（不透明）”ところ
よく見える
マスクの“黒っぽい（透明）”ところ
見えない
その間のグレー
半透明（ちょっと見える）

この「途中の薄さ」を使えるのが、デザイン的にかなり強いです。ぼかし・フェード・くり抜き文字・模様の透過などが、画像加工なしでCSSだけでできます。

何が指定できる？（画像だけじゃない）

mask-image は「マスクに使う素材」を指定します。

“画像を用意しないと無理”ではなく、まずグラデーションだけで練習できます。これが初心者にとってかなり助かります。

最小の書き方（まずこれだけでOK）

次のコードだけで、「上が見えて下に行くほど消える」を作れます。

ここにテキストや画像が入ります。
下に行くほどフェードして消えるイメージ。

HTML

<div class="maskFade">
	ここにテキストや画像が入ります。<br>
	下に行くほどフェードして消えるイメージ。
</div>

CSS

.maskFade {
    padding: 24px;
    background: linear-gradient(135deg, #222, #666);
    color: #fff;
    font-size: 18px;
    line-height: 1.8;

    /* これが本体：下に行くほど透明になるマスク */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

ここで大事な感覚