マスクとは

グラデーションや図形を型紙として使い、要素の透明度を部分的に変える CSS の技法。フェードアウトやくり抜き表現に使う。

概要

mask-image プロパティを使って、要素の見え方を部分的に透明にする技法です。白い部分が「見える」、黒い部分が「見えない」、グレーの部分が「半透明」という型紙（マスク）を重ねる仕組みで、グラデーションを型紙にすればふわっと消えるフェードアウト表現に、SVG の図形を型紙にすれば画像を好きな形にくり抜く表現になります。

別名

表記ゆれ：マスク、mask-image、画像マスク

AI への伝え方

「画像の下端をふわっと透明にフェードアウトさせて」「画像を星の形にくり抜いて」のように、型紙にしたい形を伝えると mask-image の値（グラデーションか SVG か）が決まります。 mask-image は Safari で -webkit-mask-image の接頭辞が必要な環境があるため、「ベンダー接頭辞も付けて」と伝えると安全です。

似たパーツとの違い

「クリップパス」は境界がくっきりした図形での切り抜きに向いていますが、マスクはグラデーションを使うことで境界をぼかした中間的な透明度（半透明のフェードアウトなど）を表現できる点が違います。

デモ

下端がふわっと透明になるフェード

星形にくり抜き

コード

HTML

<div class="mask-demo">
  <div class="mask-demo__panel mask-demo__panel--fade">
    <p>下端がふわっと透明になるフェード</p>
  </div>
  <div class="mask-demo__panel mask-demo__panel--shape">
    <p>星形にくり抜き</p>
  </div>
</div>

CSS

.mask-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px;
  font-family: sans-serif;
}

.mask-demo__panel {
  display: flex;
  align-items: flex-end;
  width: 160px;
  height: 120px;
  padding: 12px;
  background: linear-gradient(135deg, #0017c1, #4dd0e1);
  color: #ffffff;
  font-size: 13px;
  text-align: center;
}

.mask-demo__panel--fade {
  /* 上を不透明(白)、下を透明(透明黒)にするグラデーションを型紙にしてフェードアウトさせる */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.mask-demo__panel--shape {
  align-items: center;
  justify-content: center;
  /* SVG の星形を data URI の型紙として使い、その形だけくり抜いて表示する */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 61,38 97,38 68,59 79,94 50,73 21,94 32,59 3,38 39,38' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,4 61,38 97,38 68,59 79,94 50,73 21,94 32,59 3,38 39,38' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}