Newly available 条件付きOK。Chrome 120+・Safari 15.4+・Firefox 53+で利用可能。
エフェクト Newly available

CSS Masks

mask-image プロパティでグラデーションやSVG・PNG画像をマスクとして使い、要素の透明度を部分的に制御する。clip-path が切り抜き形状を定義するのに対し、mask はアルファチャンネルで段階的な透明度を表現できる。フェードアウト効果や複雑な形状のマスクに適している。

エフェクトマスク

概要

mask-image プロパティでグラデーションやSVG・PNG画像をマスクとして使い、要素の透明度を部分的に制御する。clip-path が切り抜き形状を定義するのに対し、mask はアルファチャンネルで段階的な透明度を表現できる。フェードアウト効果や複雑な形状のマスクに適している。

対応ブラウザ

デスクトップ

Chrome 120+
Edge 120+
Safari 15.4+
Firefox 53+

モバイル

Chrome Android 120+
Safari iOS 15.4+
Firefox Android 53+

基本構文

CSS 
.fade-out {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.shaped {
  mask-image: url("mask-shape.svg");
  mask-size: cover;
  mask-repeat: no-repeat;
}

.text-reveal {
  mask-image: linear-gradient(to right, black 50%, transparent 50%);
  mask-size: 200% 100%;
  transition: mask-position 0.5s ease;
}

.text-reveal:hover {
  mask-position: -100% 0;
}

実務での使いどころ

  • フェードアウト効果

    コンテンツの下端をグラデーションマスクで徐々に透明にし、「もっと見る」UIを実現する。

  • 画像の形状マスク

    SVGやPNG画像をマスクとして使い、写真を任意の形状で表示する。

注意点

  • 一部ブラウザでは -webkit-mask- プレフィックスが必要な場合がある。
  • マスク画像の読み込みが遅いと、マスクなしの状態が一瞬表示されることがある。

フォールバック戦略

CSS 
/* プレフィックス付きフォールバック */
.fade-out {
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

アクセシビリティ

  • マスクで視覚的に隠されたコンテンツはスクリーンリーダーに読み上げられるため、不要なコンテンツは aria-hidden で隠す。

参考リンク