CSSマスク（mask-image）で作る高度なデザイン表現

CSSマスク（mask-image）で作る高度なデザイン表現

mask-imageは要素の表示範囲を画像やグラデーションで制御できるCSSプロパティです。clip-pathよりも滑らかで複雑な表現が可能なのが特徴です。

この記事では、実務で使えるmask-imageテクニックを初級〜上級に分けて紹介します。すべてコピペOKです。

初級：基本のマスク表現

① フェードアウトマスク（グラデーション）

CSS
.fade-mask {
  width: 300px;
  height: 150px;
  background: url(image.jpg) center / cover no-repeat;
  mask-image: linear-gradient(to right, #000 60%, transparent);
}

右側に向かってフェードアウトするマスク。画像の境界を自然に見せるときに使えます。

② 上下フェード（スクロールヒント）

CSS
.scroll-box {
  width: 300px;
  height: 100px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #ccc;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 20%,
    black 80%,
    transparent
  );
}

スクロール領域の上下をフェードさせることで、「続きがある」ことを視覚的に伝えられます。

ここに長いコンテンツが入ります。

スクロールすると続きが見えます。

このように文章が続きます。

さらにコンテンツが続きます。

まだまだ続きます。

最後のコンテンツです。

中級：デザインに使えるマスク

③ 円形スポットライト

CSS
.spotlight {
  width: 300px;
  height: 200px;
  background: url(image.jpg) center / cover;
  mask-image: radial-gradient(circle at center, black 40%, transparent 60%);
}

中央だけ表示するスポットライト風の表現。インタラクションと組み合わせると効果的です。

上級：高度なマスクテクニック

④ アニメーションマスク

CSS
@keyframes maskMove {
  0% {
    mask-position: 0% 0%;
  }
  100% {
    mask-position: 100% 0%;
  }
}

.mask-anim {
  width: 300px;
  height: 150px;
  background: url(image.jpg) center / cover;
  mask-image: linear-gradient(to right, transparent, black, transparent);
  mask-size: 200% 100%;
  animation: maskMove 2s linear infinite;
}

マスクを動かすことで、光が流れるような演出が可能です。

⑤ 画像マスク（SVG / PNG）

CSS
.image-mask {
  width: 300px;
  height: 200px;
  background: url(image.jpg) center / cover;
  mask-image: url(mask.png);
  mask-size: cover;
  mask-repeat: no-repeat;
}

任意の形で切り抜くことができるため、ブランドデザインや装飾に最適です。

まとめ

  • mask-imageはグラデーションや画像で表示範囲を制御できる
  • clip-pathより滑らかな表現が可能
  • フェード・スポットライト・テキスト装飾など実務で幅広く使える

clip-pathと使い分けることで、より高度なUIデザインが実現できます。

関連記事

PAGE TOP