CSS Masks | Frontend Practical Guide

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

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`mask`	120	120	53	15.4	120	15.4
その他
`css.properties.mask-clip` mask-clip は CSS のプロパティで、マスクが影響する領域を指定します。要素の描画されるコンテンツはこの領域に制限されます。	120	120	53	15.4	120	15.4
CSS プロパティ
`border` 非標準	1	79		4	18	3.2
`content` 非標準	1	79		4	18	3.2
`padding` 非標準	1	79		4	18	3.2
`text` 非標準	1	79		4	18	3.2
その他
`css.properties.mask-composite` mask-composite は CSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。	120	120	53	15.4	120	15.4
CSS プロパティ
`add`	120	120	53	15.4	120	15.4
`exclude`	120	120	53	15.4	120	15.4
`intersect`	120	120	53	15.4	120	15.4
`subtract`	120	120	53	15.4	120	15.4
その他
`css.properties.mask-image` mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用する画像を設定し、マスク画像のアルファチャンネルと、 mask-mode プロパティの値に応じて、マスク画像の色の輝度に基づいて、マスク画像が設定されている要素の領域を非表示にします。	120	120	53	15.4	120	15.4
CSS プロパティ
`multiple mask images` 複数のマスク画像	1	18	53	4	18	3.2
`svg masks` SVGマスク	8	18	53	4	18	3.2
その他
`css.properties.mask-mode` mask-mode は CSS のプロパティで、マスクされる要素に設定します。 mask-image で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。	120	120	53	15.4	120	15.4
CSS プロパティ
`alpha`	120	120	53	15.4	120	15.4
`luminance`	120	120	53	15.4	120	15.4
`match-source`	120	120	53	15.4	120	15.4
その他
`css.properties.mask-origin` mask-origin は CSS のプロパティで、マスクの原点を設定します。このプロパティは、マスクの位置決め領域、つまりマスク画像が配置される領域を決定します。 HTML 要素は、コンテンツの境界ボックス、パディングボックス、またはコンテンツボックス内にマスクを含めることができますが、 SVG 要素（関連付けられた CSS レイアウトボックスを持たないもの）は、塗りつぶし、ストローク、またはビューボックス内にマスクを含めることができます。複数の行にまたがるテキストの span など、複数のボックスとしてレンダリングされる要素の場合、 mask-origin プロパティは、マスクの位置指定領域を決定するために box-decoration-break プロパティが運営するボックスを指定します。	120	120	53	15.4	120	15.4
CSS プロパティ
`border` 非標準	1	79		15.4	18	15.4
`content` 非標準	1	79		15.4	18	15.4
`fill-box`	120	120	53		120
`padding` 非標準	1	79		15.4	18	15.4
`stroke-box`	120	120	53		120
`view-box`	120	120	53		120
その他
`css.properties.mask-position` mask-position は CSS プロパティで、定義されたマスク画像それぞれについて、 mask-origin で設定されたマスク位置レイヤーに対する初期位置を設定します。	120	120	53	15.4	120	15.4
`css.properties.mask-repeat` mask-repeat は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。	120	120	53	15.4	120	15.4
`css.properties.mask-size` mask-size は CSS のプロパティで、指定したマスク画像のサイズを指定します。マスク画像のサイズは、そのaspect ratioを維持するために、完全にまたは部分的に制約することができます。	120	120	53	15.4	120	15.4

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

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;
}

ライブデモ

fade outmask

CSS Masks fade outmask demo.

プレビュー全画面表示

horizontalgradient

CSS Masks horizontalgradient demo.

プレビュー全画面表示

radialmask

CSS Masks radialmask demo.

プレビュー全画面表示

実務での使いどころ

フェードアウト効果

コンテンツの下端をグラデーションマスクで徐々に透明にし、「もっと見る」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%);
}

対応ブラウザ

基本構文

ライブデモ

fade outmask

horizontalgradient

radialmask

実務での使いどころ

フェードアウト効果

画像の形状マスク

注意点

フォールバック戦略

アクセシビリティ

参考リンク