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 を活用して、洗練されたデザインを作成してみてください!
y.kobayashi
2025.03.04この記事をシェアする
このデザインを共有する
Pinterest
で保存するLINE
で共有するX
で共有するこのページのURLをコピー
https://kasoudesign.com/knowledge/css-mask-image/
Close