# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/mask-mode.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "mask-mode";
export const description = "Utilities for controlling an element's mask mode.";

<svg className="sr-only">
  <defs>
    <pattern id="checkerboard" x="0.5" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="5" height="5" fill="#fff" />
      <rect x="5" y="0" width="5" height="5" fill="#808080" />
      <rect x="0" y="5" width="5" height="5" fill="#808080" />
      <rect x="5" y="5" width="5" height="5" fill="#fff" />
    </pattern>
  </defs>
</svg>

<svg className="hidden">
  <symbol id="gradient-color-stop" viewBox="0 0 32 34">
    <path
      fill="url(#checkerboard)"
      stroke="#000"
      strokeOpacity=".05"
      d="M5 .5h22A3.5 3.5 0 0 1 30.5 4v19.6a3.5 3.5 0 0 1-1.853 3.088L16 33.433 3.353 26.688A3.5 3.5 0 0 1 1.5 23.6V4A3.5 3.5 0 0 1 5 .5Z"
    />
    <path
      fill="currentColor"
      d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z"
    />
  </symbol>
</svg>

<ApiTable
  rows={[
    ["mask-alpha", "mask-mode: alpha;"],
    ["mask-luminance", "mask-mode: luminance;"],
    ["mask-match", "mask-mode: match-source;"],
  ]}
/>

## Examples

### Basic example

Use the `mask-alpha`, `mask-luminance` and `mask-match` utilities to control the mode of an element's mask:

<Figure>

<Example>
  {
    <div className="mx-5 grid gap-10 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
      <div>
        <div className="relative h-[3.625rem]">
          <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
          <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-transparent drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
        </div>
        <div className="relative">
          <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-cover bg-center mask-alpha"></div>
          <Stripes className="absolute inset-0 rounded-lg" border />
        </div>
        <p className="mt-3">mask-alpha</p>
      </div>
      <div>
        <div className="relative h-[3.625rem]">
          <div className="absolute top-0 left-[50%] -ml-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-white drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
          <div className="absolute top-0 right-px -mr-3 flex h-12 flex-col items-center">
            <svg viewBox="0 0 32 34" className="w-7 flex-none text-black drop-shadow-sm dark:stroke-white/10">
              <use href="#gradient-color-stop" />
            </svg>
            <div className="mt-2 h-2 w-0.5 bg-gray-900/30 dark:bg-white/30"></div>
          </div>
        </div>
        <div className="relative">
          <div className="relative z-10 h-24 rounded-lg bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-r-from-white mask-r-from-50% mask-r-to-black bg-cover bg-center mask-luminance"></div>
          <Stripes className="absolute inset-0 rounded-lg" border />
        </div>
        <p className="mt-3">mask-luminance</p>
      </div>
    </div>
  }
</Example>

{/* prettier-ignore */}
```html
<!-- [!code classes:mask-alpha,mask-luminance] -->
<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div>
<div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>
```

</Figure>

When using `mask-luminance` the luminance value of the mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With `mask-alpha`, the opacity of the mask determines the visibility of the masked element.

### Responsive design

<ResponsiveDesign property="mask-mode" defaultClass="mask-alpha" featuredClass="mask-luminance" />