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

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

export const title = "mask-type";
export const description = "Utilities for controlling how an SVG mask is interpreted.";

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

## Examples

### Basic example

Use the `mask-type-alpha` and `mask-type-luminance` utilities to control the type of an SVG mask:

<Figure>

<Example>
  {
    <div>
      <Stripes
        border
        className="relative mx-auto flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
      >
        <svg viewBox="0 0 384 192">
          <mask id="blob1" className="mask-type-alpha fill-gray-700/70">
            <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
          </mask>
          <image
            href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
            height="100%"
            width="100%"
            preserveAspectRatio="xMaxYMid slice"
            mask="url(#blob1)"
          />
        </svg>
      </Stripes>
      <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">mask-type-alpha</p>
      <Stripes
        border
        className="relative mx-auto mt-8 flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
      >
        <svg viewBox="0 0 384 192">
          <mask id="blob2" className="mask-type-luminance fill-gray-700/70">
            <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" />
          </mask>
          <image
            href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80"
            height="100%"
            width="100%"
            preserveAspectRatio="xMaxYMid slice"
            mask="url(#blob2)"
          />
        </svg>
      </Stripes>
      <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        mask-type-luminance
      </p>
    </div>
  }
</Example>

```html
<!-- [!code classes:mask-type-alpha,mask-type-luminance] -->
<svg>
  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" />
</svg>

<svg>
  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" />
</svg>
```

</Figure>

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

### Responsive design

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