【CSSで要素をマスク】mask-imageが効かない!? mask-imageの基礎から応用まで解説！

Webデザインにおいて、要素の一部を透過させたり、グラデーションでフェードアウトさせる表現はよく使われます。
その際に役立つのが mask-image です。本記事では、mask-image の基本から、実践的なテクニックまで詳しく解説します。

mask-imageとは？

mask-image はCSSプロパティの一つで、指定した画像やグラデーションを使用して要素の一部をマスキング（透過）することができます。
背景画像を切り抜く clip-path と似ていますが、mask-image では透過度を指定できるのが特徴です。

基本的な書き方

.element {
  mask-image: url("mask.png");
  -webkit-mask-image: url("mask.png"); /* Safari用 */
}

See the Pen CSSマスク – 01 by Dezadezi (@dezadezi) on CodePen.

このコードでは、mask.png の白い部分は完全に表示され、黒い部分は完全に透過されます。

mask-image の基本

1. グラデーションでフェードアウト

.element {
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

See the Pen CSSマスク – 02 by Dezadezi (@dezadezi) on CodePen.

この例では、要素が下方向にフェードアウトするマスク効果を作ります。黒から透明に変わることで、下端が自然に消えていきます。

2. 画像を使用したマスク

.element {
  mask-image: url("mask-pattern.png");
  mask-size: cover;
  -webkit-mask-image: url("mask-pattern.png");
  -webkit-mask-size: cover;
}

See the Pen CSSマスク – 03 by Dezadezi (@dezadezi) on CodePen.

このコードでは、指定した mask-pattern.png の形に要素がマスクされます。

mask-image の応用

1. テキストのマスク

mask-image を使って、テキストに特定のパターンやグラデーションを適用できます。

.text {
  font-size: 80px;
  font-weight: bold;
  color: black;
  background: url("texture.jpg") no-repeat center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}

See the Pen CSSマスク – 04 by Dezadezi (@dezadezi) on CodePen.

2. 複数のマスクを組み合わせる

mask-image は mask-composite を使って複数のマスクを合成することが可能です。

.element {
  mask-image: url("mask1.png"), url("mask2.png");
  mask-composite: intersect;
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-composite: intersect;
}

See the Pen CSSマスク – 05 by Dezadezi (@dezadezi) on CodePen.

このコードでは、mask1.png と mask2.png の共通部分のみが表示されるマスク効果を適用します。

3. hover時にマスク効果を変更

マスク効果をホバー時に変えることで、インタラクティブなデザインを作成できます。

.element {
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.element:hover {
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

このコードでは、ホバー時にマスクの範囲が拡大します。

mask-image に transition でアニメーションさせることは できません。
理由として、mask-imageはCSS Image Values and Replaced Contentの仕様に基づいており、
transitionやanimationの補間（interpolation）をサポートしていないためです。

See the Pen CSSマスク – 06 by Dezadezi (@dezadezi) on CodePen.

まとめ

mask-image を使うことで、グラデーションや画像を利用したマスク表現を簡単に実装できます。基本的な mask-image の使い方から、複数マスクやホバーエフェクトまで、幅広い用途で活用できます。

ぜひ mask-image を活用して、洗練されたデザインを作成してみてください！