ドキュメントブログショーケースプラス
  1. エフェクト
  2. mask-image

エフェクト

mask-image

要素のマスク画像を制御するためのユーティリティ。

クラススタイル
mask-[<value>]
mask-image: <value>;
mask-(<custom-property>)
mask-image: var(<custom-property>);
mask-none
mask-image: none;
mask-linear-<number>
mask-image: linear-gradient(<number>deg, black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
-mask-linear-<number>
mask-image: linear-gradient(calc(<number>deg * -1), black var(--tw-mask-linear-from)), transparent var(--tw-mask-linear-to));
mask-linear-from-<number>
mask-image: linear-gradient(var(--tw-mask-linear-position), black calc(var(--spacing * <number>)), transparent var(--tw-mask-linear-to));
mask-linear-from-<percentage>
mask-image: linear-gradient(var(--tw-mask-linear-position), black <percentage>, transparent var(--tw-mask-linear-to));
mask-linear-from-<color>
mask-image: linear-gradient(var(--tw-mask-linear-position), <color> var(--tw-mask-linear-from), transparent var(--tw-mask-linear-to));
mask-linear-from-(<custom-property>)
mask-image: linear-gradient(var(--tw-mask-linear-position), black <custom-property>, transparent var(--tw-mask-linear-to));
mask-linear-from-[<value>]
mask-image: linear-gradient(var(--tw-mask-linear-position), black <value>, transparent var(--tw-mask-linear-to));

例

画像マスクの使用例

要素のマスク画像を設定するには、mask-[<value>]構文を使用します。

<div class="mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...">
  <!-- ... -->
</div>

エッジのマスキング

要素の片側だけに線形グラデーションマスクを追加するには、mask-b-from-<value> や mask-t-to-<value> などのユーティリティを使用します。

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

さらに、mask-x-from-70% や mask-y-to-90% などのユーティリティを使用すると、要素の 2 つの辺に同時にマスクを適用できます。

mask-x-from-70% mask-x-to-90%

mask-y-from-70% mask-y-to-90%

<div class="mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ..."></div>

デフォルトでは、線形グラデーションマスクは黒から透明にtransitionしますが、mask-<side>-from-<color> および mask-<side>-to-<color> ユーティリティを使用してグラデーションの色をカスタマイズできます。

角度付き線形マスクの追加

要素にカスタム線形グラデーションマスクを追加するには、mask-linear-<angle>、mask-linear-from-20、および mask-linear-to-40 などのユーティリティを使用します。

mask-linear-50

-mask-linear-50

<div class="mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

放射状マスクの追加

mask-radial-from-<value> および mask-radial-to-<value> ユーティリティを使用して、要素に放射状グラデーションマスクを追加します。

スピード

パワーユーザー向けに構築

キーボードショートカットでこれまで以上に速く作業できます

<div class="flex items-center gap-4">
  <img class="mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ..." src="/img/keyboard.png" />
  <div class="font-medium">
    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Work faster than ever with customizable keyboard shortcuts
    </p>
  </div>
</div>

デフォルトでは、放射状グラデーションマスクは黒から透明に transition しますが、mask-radial-from-<color> および mask-radial-to-<color> ユーティリティを使用してグラデーションカラーをカスタマイズできます。

放射状の位置の設定

mask-radial-at-bottom-left や mask-radial-at-[35%_35%] のようなユーティリティを使用して、放射状グラデーションマスクの中心の位置を設定します

mask-radial-at-top-left

mask-radial-at-top

mask-radial-at-top-right

mask-radial-at-left

mask-radial-at-center

mask-radial-at-right

mask-radial-at-bottom-left

mask-radial-at-bottom

mask-radial-at-bottom-right

<div class="mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ..."></div>

これは、放射状グラデーションではなく、マスク画像自体の位置を設定する mask-position とは異なります。

放射状のサイズの設定

mask-radial-closest-corner や mask-radial-farthest-side のようなユーティリティを使用して、放射状グラデーションマスクのサイズを設定します

mask-radial-closest-side

mask-radial-closest-corner

mask-radial-farthest-side

mask-radial-farthest-corner

<div class="mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ..."></div>

カスタムの放射状グラデーションサイズを設定する場合、使用できる単位は、デフォルトで ellipse に設定されているグラデーションの <ending-shape> に依存します。

mask-circle では、mask-radial-[5rem] のように、単一の固定長のみを使用できます。一方、mask-ellipse では、mask-radial-[40%_80%]` のように、各軸を固定長またはパーセンテージで指定できます。

円錐マスクの追加

mask-conic-from-<value>、mask-conic-to-<value>、および mask-conic-<angle> ユーティリティを使用して、要素に円錐グラデーションマスクを追加します。

ストレージ使用量：75％

2 GB 中 0.48 GB 使用済み

<div class="flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
  <div class="grid grid-cols-1 grid-rows-1">
    <div class="border-4 border-gray-100 dark:border-gray-700 ..."></div>
    <div class="border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ..."></div>
  </div>
  <div class="w-0 flex-1 text-sm text-gray-950 dark:text-white">
    <p class="font-medium">Storage used: 75%</p>
    <p class="mt-1 text-gray-500 dark:text-gray-400"><span class="font-medium">0.48 GB</span> out of 2 GB remaining</p>
  </div>
</div>

デフォルトでは、円錐グラデーションマスクは黒から透明に transition しますが、mask-conic-from-<color> および mask-conic-to-<color> ユーティリティを使用してグラデーションカラーをカスタマイズできます。

マスクの結合

mask-radial-from-<value>、mask-conic-to-<value>、mask-l-from-<value> のようなグラデーションマスクユーティリティを組み合わせることで、より複雑なグラデーションマスクを作成できます。

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

この動作は、Tailwind が mask-composite プロパティ をデフォルトで intersect に設定しているという事実に依存しています。このプロパティを変更すると、グラデーションマスクの結合方法に影響します。

マスク画像の削除

mask-none ユーティリティを使用して、要素から既存のマスク画像を削除します。

<div class="mask-none">
  <!-- ... -->
</div>

カスタム値の使用

次のようなユーティリティを使用します。 mask-linear-[<value>] および mask-radial-[<value>]を設定するにはマスク画像完全にカスタムな値に基づいて

<div class="mask-linear-[70deg,transparent_10%,black,transparent_80%] ...">
  <!-- ... -->
</div>

CSS 変数の場合、以下も使用できます。 mask-linear-(<custom-property>) 構文

<div class="mask-linear-(--my-mask) ...">
  <!-- ... -->
</div>

これは単なるショートハンドです mask-linear-[var(<custom-property>)] `var()` 関数を自動的に追加する

レスポンシブデザイン

プレフィックスa mask-image ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定します。

<div class="mask-radial-from-70% md:mask-radial-from-50% ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

--color-* テーマ変数を使用して、以下をカスタマイズします。color プロジェクトのユーティリティ

@theme {
  --color-regal-blue: #243c5a; 
}

これで、次のようなユーティリティが mask-radial-from-regal-blue、mask-conic-to-regal-blue、および mask-b-from-regal-blueマークアップで使用できます

<div class="mask-radial-from-regal-blue">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、 テーマのドキュメントを参照してください。.

このページについて

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー