@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/mask-image.mdx

@@ -0,0 +1,933 @@
+import KeyboardLight from "@/docs/img/keyboard-light.png";
+import KeyboardDark from "@/docs/img/keyboard-dark.png";
+import maskImg from "@/docs/img/mask.png";
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourThemeColors, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+import dedent from "dedent";
+
+export const title = "mask-image";
+export const description = "Utilities for controlling an element's mask image.";
+
+<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-[<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-linear-to-<number>",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-linear-to-<percentage>",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <percentage>);",
+    ],
+    [
+      "mask-linear-to-<color>",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), <color> var(--tw-mask-linear-to));",
+    ],
+    [
+      "mask-linear-to-(<custom-property>)",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent var(<custom-property>));",
+    ],
+    [
+      "mask-linear-to-[<value>]",
+      "mask-image: linear-gradient(var(--tw-mask-linear-position), black var(--tw-mask-linear-from), transparent <value>);",
+    ],
+    [
+      "mask-t-from-<number>",
+      "mask-image: linear-gradient(to top, black calc(var(--spacing) * <number>), transparent var(--tw-mask-top-to));",
+    ],
+    [
+      "mask-t-from-<percentage>",
+      "mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to));",
+    ],
+    [
+      "mask-t-from-<color>",
+      "mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to));",
+    ],
+    [
+      "mask-t-from-(<custom-property>)",
+      "mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to));",
+    ],
+    ["mask-t-from-[<value>]", "mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to));"],
+    [
+      "mask-t-to-<number>",
+      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-t-to-<percentage>",
+      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <percentage>);",
+    ],
+    [
+      "mask-t-to-<color>",
+      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to));",
+    ],
+    [
+      "mask-t-to-(<custom-property>)",
+      "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>));",
+    ],
+    ["mask-t-to-[<value>]", "mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>);"],
+    [
+      "mask-r-from-<number>",
+      "mask-image: linear-gradient(to right, black calc(var(--spacing) * <number>), transparent var(--tw-mask-right-to));",
+    ],
+    [
+      "mask-r-from-<percentage>",
+      "mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to));",
+    ],
+    [
+      "mask-r-from-<color>",
+      "mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to));",
+    ],
+    [
+      "mask-r-from-(<custom-property>)",
+      "mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to));",
+    ],
+    [
+      "mask-r-from-[<value>]",
+      "mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to));",
+    ],
+    [
+      "mask-r-to-<number>",
+      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-r-to-<percentage>",
+      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <percentage>);",
+    ],
+    [
+      "mask-r-to-<color>",
+      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to));",
+    ],
+    [
+      "mask-r-to-(<custom-property>)",
+      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>));",
+    ],
+    [
+      "mask-r-to-[<value>]",
+      "mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>);",
+    ],
+    [
+      "mask-b-from-<number>",
+      "mask-image: linear-gradient(to bottom, black calc(var(--spacing) * <number>), transparent var(--tw-mask-bottom-to));",
+    ],
+    [
+      "mask-b-from-<percentage>",
+      "mask-image: linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to));",
+    ],
+    [
+      "mask-b-from-<color>",
+      "mask-image: linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));",
+    ],
+    [
+      "mask-b-from-(<custom-property>)",
+      "mask-image: linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to));",
+    ],
+    [
+      "mask-b-from-[<value>]",
+      "mask-image: linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to));",
+    ],
+    [
+      "mask-b-to-<number>",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-b-to-<percentage>",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>);",
+    ],
+    [
+      "mask-b-to-<color>",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to));",
+    ],
+    [
+      "mask-b-to-(<custom-property>)",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>));",
+    ],
+    [
+      "mask-b-to-[<value>]",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>);",
+    ],
+    [
+      "mask-l-from-<number>",
+      "mask-image: linear-gradient(to left, black calc(var(--spacing) * <number>), transparent var(--tw-mask-left-to));",
+    ],
+    [
+      "mask-l-from-<percentage>",
+      "mask-image: linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to));",
+    ],
+    [
+      "mask-l-from-<color>",
+      "mask-image: linear-gradient(to left, <color> var(--tw-mask-left-from), transparent var(--tw-mask-left-to));",
+    ],
+    [
+      "mask-l-from-(<custom-property>)",
+      "mask-image: linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to));",
+    ],
+    [
+      "mask-l-from-[<value>]",
+      "mask-image: linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to));",
+    ],
+    [
+      "mask-l-to-<number>",
+      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-l-to-<percentage>",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), transparent <percentage>);",
+    ],
+    [
+      "mask-l-to-<color>",
+      "mask-image: linear-gradient(to bottom, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to));",
+    ],
+    [
+      "mask-l-to-(<custom-property>)",
+      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>));",
+    ],
+    [
+      "mask-l-to-[<value>]",
+      "mask-image: linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>);",
+    ],
+    [
+      "mask-y-from-<number>",
+      dedent`
+        mask-image: linear-gradient(to top, black calc(var(--spacing) * <number>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black calc(var(--spacing) * <number>), transparent var(--tw-mask-bottom-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-from-<percentage>",
+      dedent`
+        mask-image: linear-gradient(to top, black <percentage>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <percentage>, transparent var(--tw-mask-bottom-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-from-<color>",
+      dedent`
+        mask-image: linear-gradient(to top, <color> var(--tw-mask-top-from), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, <color> var(--tw-mask-bottom-from), transparent var(--tw-mask-bottom-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-from-(<custom-property>)",
+      dedent`
+        mask-image: linear-gradient(to top, black var(<custom-property>), transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black var(<custom-property>), transparent var(--tw-mask-bottom-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-from-[<value>]",
+      dedent`
+        mask-image: linear-gradient(to top, black <value>, transparent var(--tw-mask-top-to)), linear-gradient(to bottom, black <value>, transparent var(--tw-mask-bottom-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-to-<number>",
+      dedent`
+        mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent calc(var(--spacing) * <number>)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent calc(var(--spacing) * <number>));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-to-<percentage>",
+      dedent`
+        mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), transparent <percentage>), linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <percentage>);
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-to-<color>",
+      dedent`
+        mask-image: linear-gradient(to bottom, black var(--tw-mask-top-from), <color> var(--tw-mask-top-to)), linear-gradient(to bottom, black var(--tw-mask-bottom-from), <color> var(--tw-mask-bottom-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-to-(<custom-property>)",
+      dedent`
+      mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent var(<custom-property>)),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent var(<custom-property>));
+      mask-composite: intersect;`,
+    ],
+    [
+      "mask-y-to-[<value>]",
+      dedent`
+      mask-image: linear-gradient(to top, black var(--tw-mask-top-from), transparent <value>),linear-gradient(to bottom, black var(--tw-mask-bottom-from), transparent <value>);
+      mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-from-<number>",
+      dedent`
+        mask-image: linear-gradient(to right, black calc(var(--spacing) * <number>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black calc(var(--spacing) * <number>), transparent var(--tw-mask-left-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-from-<percentage>",
+      dedent`
+        mask-image: linear-gradient(to right, black <percentage>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <percentage>, transparent var(--tw-mask-left-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-from-<color>",
+      dedent`
+        mask-image: linear-gradient(to right, <color> var(--tw-mask-right-from), transparent var(--tw-mask-right-to)), linear-gradient(to left, <color>  var(--tw-mask-left-from), transparent var(--tw-mask-left-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-from-(<custom-property>)",
+      dedent`
+        mask-image: linear-gradient(to right, black var(<custom-property>), transparent var(--tw-mask-right-to)), linear-gradient(to left, black var(<custom-property>), transparent var(--tw-mask-left-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-from-[<value>]",
+      dedent`
+        mask-image: linear-gradient(to right, black <value>, transparent var(--tw-mask-right-to)), linear-gradient(to left, black <value>, transparent var(--tw-mask-left-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-to-<number>",
+      dedent`
+        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent calc(var(--spacing) * <number>)), linear-gradient(to left, black var(--tw-mask-left-from), transparent calc(var(--spacing) * <number>));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-to-<percentage>",
+      dedent`
+        mask-image: linear-gradient(to left, black var(--tw-mask-right-from), transparent <percentage>), linear-gradient(to left, black var(--tw-mask-left-from), transparent <percentage>);
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-to-<color>",
+      dedent`
+        mask-image: linear-gradient(to left, black var(--tw-mask-right-from), <color> var(--tw-mask-right-to)), linear-gradient(to left, black var(--tw-mask-left-from), <color> var(--tw-mask-left-to));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-to-(<custom-property>)",
+      dedent`
+        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent var(<custom-property>)),linear-gradient(to left, black var(--tw-mask-left-from), transparent var(<custom-property>));
+        mask-composite: intersect;`,
+    ],
+    [
+      "mask-x-to-[<value>]",
+      dedent`
+        mask-image: linear-gradient(to right, black var(--tw-mask-right-from), transparent <value>),linear-gradient(to left, black var(--tw-mask-left-from), transparent <value>);
+        mask-composite: intersect;`,
+    ],
+    ["mask-radial-[<value>]", "mask-image: radial-gradient(<value>);"],
+    ["mask-radial-[<size>]", "--tw-mask-radial-size: <size>;"],
+    ["mask-radial-[<size>_<size>]", "--tw-mask-radial-size: <size> <size>;"],
+    [
+      "mask-radial-from-<number>",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-radial-to));",
+    ],
+    [
+      "mask-radial-from-<percentage>",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <percentage>, transparent var(--tw-mask-radial-to));",
+    ],
+    [
+      "mask-radial-from-<color>",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), <color> var(--tw-mask-radial-from), transparent var(--tw-mask-radial-to));",
+    ],
+    [
+      "mask-radial-from-(<custom-property>)",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(<custom-property>), transparent var(--tw-mask-radial-to));",
+    ],
+    [
+      "mask-radial-from-[<value>]",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black <value>, transparent var(--tw-mask-radial-to));",
+    ],
+    [
+      "mask-radial-to-<number>",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-radial-to-<percentage>",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <percentage>);",
+    ],
+    [
+      "mask-radial-to-<color>",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), <color> var(--tw-mask-radial-to));",
+    ],
+    [
+      "mask-radial-to-(<custom-property>)",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent var(<custom-property>));",
+    ],
+    [
+      "mask-radial-to-[<value>]",
+      "mask-image: radial-gradient(var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), black var(--tw-mask-radial-from), transparent <value>);",
+    ],
+    ["mask-circle", "--tw-mask-radial-shape: circle;"],
+    ["mask-ellipse", "--tw-mask-radial-shape: ellipse;"],
+    ["mask-radial-closest-corner", "--tw-mask-radial-size: closest-corner;"],
+    ["mask-radial-closest-side", "--tw-mask-radial-size: closest-side;"],
+    ["mask-radial-farthest-corner", "--tw-mask-radial-size: farthest-corner;"],
+    ["mask-radial-farthest-side", "--tw-mask-radial-size: farthest-side;"],
+    ["mask-radial-at-top-left", "--tw-mask-radial-position: top left;"],
+    ["mask-radial-at-top", "--tw-mask-radial-position: top;"],
+    ["mask-radial-at-top-right", "--tw-mask-radial-position: top right;"],
+    ["mask-radial-at-left", "--tw-mask-radial-position: left;"],
+    ["mask-radial-at-center", "--tw-mask-radial-position: center;"],
+    ["mask-radial-at-right", "--tw-mask-radial-position: right;"],
+    ["mask-radial-at-bottom-left", "--tw-mask-radial-position: bottom left;"],
+    ["mask-radial-at-bottom", "--tw-mask-radial-position: bottom;"],
+    ["mask-radial-at-bottom-right", "--tw-mask-radial-position: bottom right;"],
+    [
+      "mask-conic-<number>",
+      "mask-image: conic-gradient(from <number>deg, black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "-mask-conic-<number>",
+      "mask-image: conic-gradient(from calc(<number>deg * -1), black var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "mask-conic-from-<number>",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black calc(var(--spacing) * <number>), transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "mask-conic-from-<percentage>",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black <percentage>, transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "mask-conic-from-<color>",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), <color> var(--tw-mask-conic-from), transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "mask-conic-from-(<custom-property>)",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(<custom-property>), transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "mask-conic-from-[<value>]",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black <value>, transparent var(--tw-mask-conic-to));",
+    ],
+    [
+      "mask-conic-to-<number>",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent calc(var(--spacing) * <number>));",
+    ],
+    [
+      "mask-conic-to-<percentage>",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <percentage>);",
+    ],
+    [
+      "mask-conic-to-<color>",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), <color> var(--tw-mask-conic-to);",
+    ],
+    [
+      "mask-conic-to-(<custom-property>)",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent var(<custom-property>);",
+    ],
+    [
+      "mask-conic-to-[<value>]",
+      "mask-image: conic-gradient(from var(--tw-mask-conic-position), black var(--tw-mask-conic-from), transparent <value>);",
+    ],
+  ]}
+/>
+
+## Examples
+
+### Using an image mask
+
+Use the `mask-[<value>]` syntax to set the mask image of an element:
+
+<Figure>
+
+<Example>
+  {
+    <Stripes
+      border
+      className="relative mx-auto flex h-48 w-full max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96"
+    >
+      <div
+        className="h-full w-full 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)] bg-cover bg-center bg-no-repeat mask-size-[110%_90%] mask-center mask-no-repeat"
+        style={{ maskImage: `url(${maskImg.src})` }}
+      ></div>
+    </Stripes>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-[url(/img/scribble.png)]] -->
+<div class="mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+### Masking edges
+
+Use utilities like `mask-b-from-<value>` and `mask-t-to-<value>` to add a linear gradient mask to a single side of an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-t-from-50%</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-t-from-50% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-r-from-30%</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-30% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-l-from-50% mask-l-to-90%</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-l-from-50% mask-l-to-90% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-b-from-20% mask-b-to-80%</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-b-from-20% mask-b-to-80% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes: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>
+```
+
+</Figure>
+
+Additionally, use utilities like `mask-x-from-70%` and `mask-y-to-90%` to apply a mask to two sides of an element at the same time:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-x-from-70% mask-x-to-90%</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-x-from-70% mask-x-to-90% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-y-from-70% mask-y-to-90%</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-y-from-70% mask-y-to-90% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes: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>
+```
+
+</Figure>
+
+By default, linear gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-<side>-from-<color>` and `mask-<side>-to-<color>` utilities.
+
+### Adding an angled linear mask
+
+Use utilities like `mask-linear-<angle>`, `mask-linear-from-20`, and `mask-linear-to-40` to add a custom linear gradient mask to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-linear-50</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-linear-50 mask-linear-from-60% mask-linear-to-80% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>-mask-linear-50</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-linear-50 mask-linear-from-60% mask-linear-to-80% bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-linear-50,mask-linear-from-60%,mask-linear-to-80%,-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>
+```
+
+</Figure>
+
+### Adding a radial mask
+
+Use the `mask-radial-from-<value>` and `mask-radial-to-<value>` utilities to add a radial gradient mask to an element:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="mx-auto flex items-center p-16 max-sm:p-6">
+      <img
+        src={KeyboardLight.src}
+        className="aspect-square max-h-72 w-full mask-radial-[100%_200%] mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-60% mask-radial-at-right object-cover object-top-left dark:hidden"
+        alt=""
+      />
+      <img
+        src={KeyboardDark.src}
+        className="hidden aspect-square max-h-72 w-full mask-radial-[100%_200%] mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-60% mask-radial-at-right object-cover object-top-left dark:block"
+        alt=""
+      />
+      <div className="font-medium max-sm:-mx-3">
+        <p className="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Speed</p>
+        <p className="mt-2 text-base whitespace-nowrap text-gray-700 dark:text-gray-300">Built for power users</p>
+        <p className="mt-1 text-sm leading-relaxed text-balance text-gray-500">
+          Work faster than ever with our keyboard shortcuts
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mask-radial-from-75%] -->
+<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>
+```
+
+</Figure>
+
+By default, radial gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-radial-from-<color>` and `mask-radial-to-<color>` utilities.
+
+#### Setting the radial position
+
+Use utilities like `mask-radial-at-bottom-left` and `mask-radial-at-[35%_35%]` to set the position of the center of the radial gradient mask:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-3 dark:text-gray-400">
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-top-left</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-top-left bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-top</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-top bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-top-right</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-top-right bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-left</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-left bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-center</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-center bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-right</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-right bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-bottom-left</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-bottom-left bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-bottom</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-bottom bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-at-bottom-right</p>
+        <div className="grid size-28 grid-cols-1 max-sm:size-24">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-[33%_33%] mask-radial-from-100% mask-radial-at-bottom-right bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes: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,mask-radial-at-bottom-left,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>
+```
+
+</Figure>
+
+This is different from [`mask-position`](/docs/mask-position) which sets the position of the mask image itself, not the radial gradient.
+
+#### Setting the radial size
+
+Use utilities like `mask-radial-closest-corner` and `mask-radial-farthest-side` to set the size of the radial gradient mask:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-closest-side</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-from-100% mask-radial-closest-side mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-closest-corner</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-from-100% mask-radial-closest-corner mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-farthest-side</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-from-100% mask-radial-farthest-side mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-3">
+        <p>mask-radial-farthest-corner</p>
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-radial-from-100% mask-radial-farthest-corner mask-radial-at-[30%_30%] bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-radial-farthest-corner,mask-radial-farthest-side,mask-radial-closest-corner,mask-radial-closest-side] -->
+<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>
+```
+
+</Figure>
+
+When setting a custom radial gradient size, the units you can use depend on the `<ending-shape>` of the gradient which is set to `ellipse` by default.
+
+With `mask-circle`, you can only use a single fixed length, like `mask-radial-[5rem]`. Whereas with `mask-ellipse`, you can specify each axis as a fixed length or percentage, like `mask-radial-[40%_80%]`.
+
+### Adding a conic mask
+
+Use the `mask-conic-from-<value>`, `mask-conic-to-<value>` and `mask-conic-<angle>` utilities to add a conic gradient mask to an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto flex w-full max-w-sm items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
+      <div className="grid grid-cols-1 grid-rows-1">
+        <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-gray-100 dark:border-gray-700" />
+        <div className="col-start-1 row-start-1 size-12 rounded-full border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400" />
+      </div>
+      <div className="w-0 flex-1 text-sm text-gray-950 dark:text-white">
+        <p className="font-medium">Storage used: 75%</p>
+        <p className="mt-1 text-gray-500 dark:text-gray-400">
+          <span className="font-medium">0.48 GB</span> out of 2 GB remaining
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:mask-conic-from-75%,mask-conic-to-75%] -->
+<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>
+```
+
+</Figure>
+
+By default, conic gradient masks transition from black to transparent, but you can customize the gradient colors using the `mask-conic-from-<color>` and `mask-conic-to-<color>` utilities.
+
+### Combining masks
+
+Gradient mask utilities, like `mask-radial-from-<value>`, `mask-conic-to-<value>`, and `mask-l-from-<value>` can be combined to create more complex gradient masks:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 items-end gap-x-2 gap-y-8 p-8 text-center font-mono text-xs font-medium text-gray-500 max-sm:justify-between max-sm:px-2 sm:grid-cols-2 dark:text-gray-400">
+      <div className="flex flex-col items-center">
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% mask-radial-at-bottom bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-center">
+        <div className="grid aspect-3/2 w-48 grid-cols-1">
+          <Stripes className="col-start-1 row-start-1 rounded-lg" border />
+          <div className="col-start-1 row-start-1 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-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% mask-circle mask-radial-at-top-left bg-cover bg-center mask-no-repeat"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+{/* prettier-ignore */}
+```html
+<!-- [!code classes:mask-b-from-50%,mask-radial-[50%_90%],mask-radial-from-80%,mask-r-from-80%,mask-b-from-80%,mask-radial-from-70%,mask-radial-to-85%] -->
+<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>
+```
+
+</Figure>
+
+This behavior relies on the fact that Tailwind sets the [`mask-composite` property](/docs/mask-composite) to `intersect` by default. Changing this property will affect how the gradient masks are combined.
+
+### Removing mask images
+
+Use the `mask-none` utility to remove an existing mask image from an element:
+
+```html
+<!-- [!code classes:mask-none] -->
+<div class="mask-none">
+  <!-- ... -->
+</div>
+```
+
+### Using a custom value
+
+<UsingACustomValue
+  utilities={["mask-linear", "mask-radial"]}
+  name="mask image"
+  value="70deg,transparent_10%,black,transparent_80%"
+  variable="mask"
+/>
+
+### Responsive design
+
+<ResponsiveDesign property="mask-image" defaultClass="mask-radial-from-70%" featuredClass="mask-radial-from-50%" />
+
+## Customizing your theme
+
+<CustomizingYourThemeColors utilities={["mask-radial-from", "mask-conic-to", "mask-b-from"]} />