Mask Mode

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> ```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" />