Mask Origin

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";

export const title = "mask-origin"; export const description = "Utilities for controlling how an element's mask image is positioned relative to borders, padding, and content.";

<ApiTable rows={[ ["mask-origin-border", "mask-origin: border-box;"], ["mask-origin-padding", "mask-origin: padding-box;"], ["mask-origin-content", "mask-origin: content-box;"], ["mask-origin-fill", "mask-origin: fill-box;"], ["mask-origin-stroke", "mask-origin: stroke-box;"], ["mask-origin-view", "mask-origin: view-box;"], ]} />

Examples

Basic example

Use utilities like mask-origin-border, mask-origin-padding, and mask-origin-content to control where an element's mask is rendered:

<Figure> <Example> { <div className="flex flex-col gap-y-10 text-center font-mono text-xs font-medium text-gray-500 sm:flex-row sm:justify-between dark:text-gray-400"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3">mask-origin-border</p> <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75"> <div className="absolute -inset-[3px] 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-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-border p-1.5"></div> </div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3">mask-origin-padding</p> <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75"> <div className="absolute -inset-[3px] rounded-lg border-3 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-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-padding p-1.5"></div> </div> </div> <div className="flex shrink-0 flex-col items-center"> <p className="mb-3">mask-origin-content</p> <div className="relative size-24 rounded-lg border-3 border-dashed border-indigo-500/50 dark:border-indigo-400/75"> <div className="absolute -inset-[3px] rounded-lg border-3 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-radial-[50%_50%] mask-radial-from-100% bg-cover bg-center mask-no-repeat mask-origin-content p-1.5"></div> </div> </div> </div> } </Example> ```html <!-- [!code classes:mask-origin-border,mask-origin-padding,mask-origin-content] --> <div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div> <div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div> <div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div> ``` </Figure>

Responsive design

<ResponsiveDesign property="mask-origin" defaultClass="mask-origin-border" featuredClass="mask-origin-padding" />