diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c7a500401da..62c3c79bffb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))
 - _Experimental_: Add `@source not` ([#17255](https://github.com/tailwindlabs/tailwindcss/pull/17255))
 - _Experimental_: Add `text-shadow-*` utilities ([#17389](https://github.com/tailwindlabs/tailwindcss/pull/17389))
+- _Experimental_: Add `mask-*` utilities ([#17134](https://github.com/tailwindlabs/tailwindcss/pull/17134))
 - Added new `bg-{top,bottom}-{left,right}` utilities ([#17378](https://github.com/tailwindlabs/tailwindcss/pull/17378))
 - Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
 - Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398))
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index b988ed28c0b6..b44c9144dc9c 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -686,6 +686,24 @@ exports[`getClassList 1`] = `
   "-m-80",
   "-m-96",
   "-m-px",
+  "-mask-conic-0",
+  "-mask-conic-1",
+  "-mask-conic-2",
+  "-mask-conic-3",
+  "-mask-conic-6",
+  "-mask-conic-12",
+  "-mask-conic-45",
+  "-mask-conic-90",
+  "-mask-conic-180",
+  "-mask-linear-0",
+  "-mask-linear-1",
+  "-mask-linear-2",
+  "-mask-linear-3",
+  "-mask-linear-6",
+  "-mask-linear-12",
+  "-mask-linear-45",
+  "-mask-linear-90",
+  "-mask-linear-180",
   "-mb-0",
   "-mb-0.5",
   "-mb-1",
@@ -5104,6 +5122,2258 @@ exports[`getClassList 1`] = `
   "m-96",
   "m-auto",
   "m-px",
+  "mask-add",
+  "mask-alpha",
+  "mask-auto",
+  "mask-b-from-0",
+  "mask-b-from-0%",
+  "mask-b-from-0.5",
+  "mask-b-from-1",
+  "mask-b-from-1.5",
+  "mask-b-from-2",
+  "mask-b-from-2.5",
+  "mask-b-from-3",
+  "mask-b-from-3.5",
+  "mask-b-from-4",
+  "mask-b-from-5",
+  "mask-b-from-5%",
+  "mask-b-from-6",
+  "mask-b-from-7",
+  "mask-b-from-8",
+  "mask-b-from-9",
+  "mask-b-from-10",
+  "mask-b-from-10%",
+  "mask-b-from-11",
+  "mask-b-from-12",
+  "mask-b-from-14",
+  "mask-b-from-15%",
+  "mask-b-from-16",
+  "mask-b-from-20",
+  "mask-b-from-20%",
+  "mask-b-from-24",
+  "mask-b-from-25%",
+  "mask-b-from-28",
+  "mask-b-from-30%",
+  "mask-b-from-32",
+  "mask-b-from-35%",
+  "mask-b-from-36",
+  "mask-b-from-40",
+  "mask-b-from-40%",
+  "mask-b-from-44",
+  "mask-b-from-45%",
+  "mask-b-from-48",
+  "mask-b-from-50%",
+  "mask-b-from-52",
+  "mask-b-from-55%",
+  "mask-b-from-56",
+  "mask-b-from-60",
+  "mask-b-from-60%",
+  "mask-b-from-64",
+  "mask-b-from-65%",
+  "mask-b-from-70%",
+  "mask-b-from-72",
+  "mask-b-from-75%",
+  "mask-b-from-80",
+  "mask-b-from-80%",
+  "mask-b-from-85%",
+  "mask-b-from-90%",
+  "mask-b-from-95%",
+  "mask-b-from-96",
+  "mask-b-from-100%",
+  "mask-b-from-current",
+  "mask-b-from-current/0",
+  "mask-b-from-current/5",
+  "mask-b-from-current/10",
+  "mask-b-from-current/15",
+  "mask-b-from-current/20",
+  "mask-b-from-current/25",
+  "mask-b-from-current/30",
+  "mask-b-from-current/35",
+  "mask-b-from-current/40",
+  "mask-b-from-current/45",
+  "mask-b-from-current/50",
+  "mask-b-from-current/55",
+  "mask-b-from-current/60",
+  "mask-b-from-current/65",
+  "mask-b-from-current/70",
+  "mask-b-from-current/75",
+  "mask-b-from-current/80",
+  "mask-b-from-current/85",
+  "mask-b-from-current/90",
+  "mask-b-from-current/95",
+  "mask-b-from-current/100",
+  "mask-b-from-inherit",
+  "mask-b-from-inherit/0",
+  "mask-b-from-inherit/5",
+  "mask-b-from-inherit/10",
+  "mask-b-from-inherit/15",
+  "mask-b-from-inherit/20",
+  "mask-b-from-inherit/25",
+  "mask-b-from-inherit/30",
+  "mask-b-from-inherit/35",
+  "mask-b-from-inherit/40",
+  "mask-b-from-inherit/45",
+  "mask-b-from-inherit/50",
+  "mask-b-from-inherit/55",
+  "mask-b-from-inherit/60",
+  "mask-b-from-inherit/65",
+  "mask-b-from-inherit/70",
+  "mask-b-from-inherit/75",
+  "mask-b-from-inherit/80",
+  "mask-b-from-inherit/85",
+  "mask-b-from-inherit/90",
+  "mask-b-from-inherit/95",
+  "mask-b-from-inherit/100",
+  "mask-b-from-transparent",
+  "mask-b-from-transparent/0",
+  "mask-b-from-transparent/5",
+  "mask-b-from-transparent/10",
+  "mask-b-from-transparent/15",
+  "mask-b-from-transparent/20",
+  "mask-b-from-transparent/25",
+  "mask-b-from-transparent/30",
+  "mask-b-from-transparent/35",
+  "mask-b-from-transparent/40",
+  "mask-b-from-transparent/45",
+  "mask-b-from-transparent/50",
+  "mask-b-from-transparent/55",
+  "mask-b-from-transparent/60",
+  "mask-b-from-transparent/65",
+  "mask-b-from-transparent/70",
+  "mask-b-from-transparent/75",
+  "mask-b-from-transparent/80",
+  "mask-b-from-transparent/85",
+  "mask-b-from-transparent/90",
+  "mask-b-from-transparent/95",
+  "mask-b-from-transparent/100",
+  "mask-b-to-0",
+  "mask-b-to-0%",
+  "mask-b-to-0.5",
+  "mask-b-to-1",
+  "mask-b-to-1.5",
+  "mask-b-to-2",
+  "mask-b-to-2.5",
+  "mask-b-to-3",
+  "mask-b-to-3.5",
+  "mask-b-to-4",
+  "mask-b-to-5",
+  "mask-b-to-5%",
+  "mask-b-to-6",
+  "mask-b-to-7",
+  "mask-b-to-8",
+  "mask-b-to-9",
+  "mask-b-to-10",
+  "mask-b-to-10%",
+  "mask-b-to-11",
+  "mask-b-to-12",
+  "mask-b-to-14",
+  "mask-b-to-15%",
+  "mask-b-to-16",
+  "mask-b-to-20",
+  "mask-b-to-20%",
+  "mask-b-to-24",
+  "mask-b-to-25%",
+  "mask-b-to-28",
+  "mask-b-to-30%",
+  "mask-b-to-32",
+  "mask-b-to-35%",
+  "mask-b-to-36",
+  "mask-b-to-40",
+  "mask-b-to-40%",
+  "mask-b-to-44",
+  "mask-b-to-45%",
+  "mask-b-to-48",
+  "mask-b-to-50%",
+  "mask-b-to-52",
+  "mask-b-to-55%",
+  "mask-b-to-56",
+  "mask-b-to-60",
+  "mask-b-to-60%",
+  "mask-b-to-64",
+  "mask-b-to-65%",
+  "mask-b-to-70%",
+  "mask-b-to-72",
+  "mask-b-to-75%",
+  "mask-b-to-80",
+  "mask-b-to-80%",
+  "mask-b-to-85%",
+  "mask-b-to-90%",
+  "mask-b-to-95%",
+  "mask-b-to-96",
+  "mask-b-to-100%",
+  "mask-b-to-current",
+  "mask-b-to-current/0",
+  "mask-b-to-current/5",
+  "mask-b-to-current/10",
+  "mask-b-to-current/15",
+  "mask-b-to-current/20",
+  "mask-b-to-current/25",
+  "mask-b-to-current/30",
+  "mask-b-to-current/35",
+  "mask-b-to-current/40",
+  "mask-b-to-current/45",
+  "mask-b-to-current/50",
+  "mask-b-to-current/55",
+  "mask-b-to-current/60",
+  "mask-b-to-current/65",
+  "mask-b-to-current/70",
+  "mask-b-to-current/75",
+  "mask-b-to-current/80",
+  "mask-b-to-current/85",
+  "mask-b-to-current/90",
+  "mask-b-to-current/95",
+  "mask-b-to-current/100",
+  "mask-b-to-inherit",
+  "mask-b-to-inherit/0",
+  "mask-b-to-inherit/5",
+  "mask-b-to-inherit/10",
+  "mask-b-to-inherit/15",
+  "mask-b-to-inherit/20",
+  "mask-b-to-inherit/25",
+  "mask-b-to-inherit/30",
+  "mask-b-to-inherit/35",
+  "mask-b-to-inherit/40",
+  "mask-b-to-inherit/45",
+  "mask-b-to-inherit/50",
+  "mask-b-to-inherit/55",
+  "mask-b-to-inherit/60",
+  "mask-b-to-inherit/65",
+  "mask-b-to-inherit/70",
+  "mask-b-to-inherit/75",
+  "mask-b-to-inherit/80",
+  "mask-b-to-inherit/85",
+  "mask-b-to-inherit/90",
+  "mask-b-to-inherit/95",
+  "mask-b-to-inherit/100",
+  "mask-b-to-transparent",
+  "mask-b-to-transparent/0",
+  "mask-b-to-transparent/5",
+  "mask-b-to-transparent/10",
+  "mask-b-to-transparent/15",
+  "mask-b-to-transparent/20",
+  "mask-b-to-transparent/25",
+  "mask-b-to-transparent/30",
+  "mask-b-to-transparent/35",
+  "mask-b-to-transparent/40",
+  "mask-b-to-transparent/45",
+  "mask-b-to-transparent/50",
+  "mask-b-to-transparent/55",
+  "mask-b-to-transparent/60",
+  "mask-b-to-transparent/65",
+  "mask-b-to-transparent/70",
+  "mask-b-to-transparent/75",
+  "mask-b-to-transparent/80",
+  "mask-b-to-transparent/85",
+  "mask-b-to-transparent/90",
+  "mask-b-to-transparent/95",
+  "mask-b-to-transparent/100",
+  "mask-bottom",
+  "mask-bottom-left",
+  "mask-bottom-right",
+  "mask-center",
+  "mask-circle",
+  "mask-clip-border",
+  "mask-clip-content",
+  "mask-clip-fill",
+  "mask-clip-padding",
+  "mask-clip-stroke",
+  "mask-clip-view",
+  "mask-conic-0",
+  "mask-conic-1",
+  "mask-conic-2",
+  "mask-conic-3",
+  "mask-conic-6",
+  "mask-conic-12",
+  "mask-conic-45",
+  "mask-conic-90",
+  "mask-conic-180",
+  "mask-conic-from-0",
+  "mask-conic-from-0%",
+  "mask-conic-from-0.5",
+  "mask-conic-from-1",
+  "mask-conic-from-1.5",
+  "mask-conic-from-2",
+  "mask-conic-from-2.5",
+  "mask-conic-from-3",
+  "mask-conic-from-3.5",
+  "mask-conic-from-4",
+  "mask-conic-from-5",
+  "mask-conic-from-5%",
+  "mask-conic-from-6",
+  "mask-conic-from-7",
+  "mask-conic-from-8",
+  "mask-conic-from-9",
+  "mask-conic-from-10",
+  "mask-conic-from-10%",
+  "mask-conic-from-11",
+  "mask-conic-from-12",
+  "mask-conic-from-14",
+  "mask-conic-from-15%",
+  "mask-conic-from-16",
+  "mask-conic-from-20",
+  "mask-conic-from-20%",
+  "mask-conic-from-24",
+  "mask-conic-from-25%",
+  "mask-conic-from-28",
+  "mask-conic-from-30%",
+  "mask-conic-from-32",
+  "mask-conic-from-35%",
+  "mask-conic-from-36",
+  "mask-conic-from-40",
+  "mask-conic-from-40%",
+  "mask-conic-from-44",
+  "mask-conic-from-45%",
+  "mask-conic-from-48",
+  "mask-conic-from-50%",
+  "mask-conic-from-52",
+  "mask-conic-from-55%",
+  "mask-conic-from-56",
+  "mask-conic-from-60",
+  "mask-conic-from-60%",
+  "mask-conic-from-64",
+  "mask-conic-from-65%",
+  "mask-conic-from-70%",
+  "mask-conic-from-72",
+  "mask-conic-from-75%",
+  "mask-conic-from-80",
+  "mask-conic-from-80%",
+  "mask-conic-from-85%",
+  "mask-conic-from-90%",
+  "mask-conic-from-95%",
+  "mask-conic-from-96",
+  "mask-conic-from-100%",
+  "mask-conic-from-current",
+  "mask-conic-from-current/0",
+  "mask-conic-from-current/5",
+  "mask-conic-from-current/10",
+  "mask-conic-from-current/15",
+  "mask-conic-from-current/20",
+  "mask-conic-from-current/25",
+  "mask-conic-from-current/30",
+  "mask-conic-from-current/35",
+  "mask-conic-from-current/40",
+  "mask-conic-from-current/45",
+  "mask-conic-from-current/50",
+  "mask-conic-from-current/55",
+  "mask-conic-from-current/60",
+  "mask-conic-from-current/65",
+  "mask-conic-from-current/70",
+  "mask-conic-from-current/75",
+  "mask-conic-from-current/80",
+  "mask-conic-from-current/85",
+  "mask-conic-from-current/90",
+  "mask-conic-from-current/95",
+  "mask-conic-from-current/100",
+  "mask-conic-from-inherit",
+  "mask-conic-from-inherit/0",
+  "mask-conic-from-inherit/5",
+  "mask-conic-from-inherit/10",
+  "mask-conic-from-inherit/15",
+  "mask-conic-from-inherit/20",
+  "mask-conic-from-inherit/25",
+  "mask-conic-from-inherit/30",
+  "mask-conic-from-inherit/35",
+  "mask-conic-from-inherit/40",
+  "mask-conic-from-inherit/45",
+  "mask-conic-from-inherit/50",
+  "mask-conic-from-inherit/55",
+  "mask-conic-from-inherit/60",
+  "mask-conic-from-inherit/65",
+  "mask-conic-from-inherit/70",
+  "mask-conic-from-inherit/75",
+  "mask-conic-from-inherit/80",
+  "mask-conic-from-inherit/85",
+  "mask-conic-from-inherit/90",
+  "mask-conic-from-inherit/95",
+  "mask-conic-from-inherit/100",
+  "mask-conic-from-transparent",
+  "mask-conic-from-transparent/0",
+  "mask-conic-from-transparent/5",
+  "mask-conic-from-transparent/10",
+  "mask-conic-from-transparent/15",
+  "mask-conic-from-transparent/20",
+  "mask-conic-from-transparent/25",
+  "mask-conic-from-transparent/30",
+  "mask-conic-from-transparent/35",
+  "mask-conic-from-transparent/40",
+  "mask-conic-from-transparent/45",
+  "mask-conic-from-transparent/50",
+  "mask-conic-from-transparent/55",
+  "mask-conic-from-transparent/60",
+  "mask-conic-from-transparent/65",
+  "mask-conic-from-transparent/70",
+  "mask-conic-from-transparent/75",
+  "mask-conic-from-transparent/80",
+  "mask-conic-from-transparent/85",
+  "mask-conic-from-transparent/90",
+  "mask-conic-from-transparent/95",
+  "mask-conic-from-transparent/100",
+  "mask-conic-to-0",
+  "mask-conic-to-0%",
+  "mask-conic-to-0.5",
+  "mask-conic-to-1",
+  "mask-conic-to-1.5",
+  "mask-conic-to-2",
+  "mask-conic-to-2.5",
+  "mask-conic-to-3",
+  "mask-conic-to-3.5",
+  "mask-conic-to-4",
+  "mask-conic-to-5",
+  "mask-conic-to-5%",
+  "mask-conic-to-6",
+  "mask-conic-to-7",
+  "mask-conic-to-8",
+  "mask-conic-to-9",
+  "mask-conic-to-10",
+  "mask-conic-to-10%",
+  "mask-conic-to-11",
+  "mask-conic-to-12",
+  "mask-conic-to-14",
+  "mask-conic-to-15%",
+  "mask-conic-to-16",
+  "mask-conic-to-20",
+  "mask-conic-to-20%",
+  "mask-conic-to-24",
+  "mask-conic-to-25%",
+  "mask-conic-to-28",
+  "mask-conic-to-30%",
+  "mask-conic-to-32",
+  "mask-conic-to-35%",
+  "mask-conic-to-36",
+  "mask-conic-to-40",
+  "mask-conic-to-40%",
+  "mask-conic-to-44",
+  "mask-conic-to-45%",
+  "mask-conic-to-48",
+  "mask-conic-to-50%",
+  "mask-conic-to-52",
+  "mask-conic-to-55%",
+  "mask-conic-to-56",
+  "mask-conic-to-60",
+  "mask-conic-to-60%",
+  "mask-conic-to-64",
+  "mask-conic-to-65%",
+  "mask-conic-to-70%",
+  "mask-conic-to-72",
+  "mask-conic-to-75%",
+  "mask-conic-to-80",
+  "mask-conic-to-80%",
+  "mask-conic-to-85%",
+  "mask-conic-to-90%",
+  "mask-conic-to-95%",
+  "mask-conic-to-96",
+  "mask-conic-to-100%",
+  "mask-conic-to-current",
+  "mask-conic-to-current/0",
+  "mask-conic-to-current/5",
+  "mask-conic-to-current/10",
+  "mask-conic-to-current/15",
+  "mask-conic-to-current/20",
+  "mask-conic-to-current/25",
+  "mask-conic-to-current/30",
+  "mask-conic-to-current/35",
+  "mask-conic-to-current/40",
+  "mask-conic-to-current/45",
+  "mask-conic-to-current/50",
+  "mask-conic-to-current/55",
+  "mask-conic-to-current/60",
+  "mask-conic-to-current/65",
+  "mask-conic-to-current/70",
+  "mask-conic-to-current/75",
+  "mask-conic-to-current/80",
+  "mask-conic-to-current/85",
+  "mask-conic-to-current/90",
+  "mask-conic-to-current/95",
+  "mask-conic-to-current/100",
+  "mask-conic-to-inherit",
+  "mask-conic-to-inherit/0",
+  "mask-conic-to-inherit/5",
+  "mask-conic-to-inherit/10",
+  "mask-conic-to-inherit/15",
+  "mask-conic-to-inherit/20",
+  "mask-conic-to-inherit/25",
+  "mask-conic-to-inherit/30",
+  "mask-conic-to-inherit/35",
+  "mask-conic-to-inherit/40",
+  "mask-conic-to-inherit/45",
+  "mask-conic-to-inherit/50",
+  "mask-conic-to-inherit/55",
+  "mask-conic-to-inherit/60",
+  "mask-conic-to-inherit/65",
+  "mask-conic-to-inherit/70",
+  "mask-conic-to-inherit/75",
+  "mask-conic-to-inherit/80",
+  "mask-conic-to-inherit/85",
+  "mask-conic-to-inherit/90",
+  "mask-conic-to-inherit/95",
+  "mask-conic-to-inherit/100",
+  "mask-conic-to-transparent",
+  "mask-conic-to-transparent/0",
+  "mask-conic-to-transparent/5",
+  "mask-conic-to-transparent/10",
+  "mask-conic-to-transparent/15",
+  "mask-conic-to-transparent/20",
+  "mask-conic-to-transparent/25",
+  "mask-conic-to-transparent/30",
+  "mask-conic-to-transparent/35",
+  "mask-conic-to-transparent/40",
+  "mask-conic-to-transparent/45",
+  "mask-conic-to-transparent/50",
+  "mask-conic-to-transparent/55",
+  "mask-conic-to-transparent/60",
+  "mask-conic-to-transparent/65",
+  "mask-conic-to-transparent/70",
+  "mask-conic-to-transparent/75",
+  "mask-conic-to-transparent/80",
+  "mask-conic-to-transparent/85",
+  "mask-conic-to-transparent/90",
+  "mask-conic-to-transparent/95",
+  "mask-conic-to-transparent/100",
+  "mask-contain",
+  "mask-cover",
+  "mask-ellipse",
+  "mask-exclude",
+  "mask-intersect",
+  "mask-l-from-0",
+  "mask-l-from-0%",
+  "mask-l-from-0.5",
+  "mask-l-from-1",
+  "mask-l-from-1.5",
+  "mask-l-from-2",
+  "mask-l-from-2.5",
+  "mask-l-from-3",
+  "mask-l-from-3.5",
+  "mask-l-from-4",
+  "mask-l-from-5",
+  "mask-l-from-5%",
+  "mask-l-from-6",
+  "mask-l-from-7",
+  "mask-l-from-8",
+  "mask-l-from-9",
+  "mask-l-from-10",
+  "mask-l-from-10%",
+  "mask-l-from-11",
+  "mask-l-from-12",
+  "mask-l-from-14",
+  "mask-l-from-15%",
+  "mask-l-from-16",
+  "mask-l-from-20",
+  "mask-l-from-20%",
+  "mask-l-from-24",
+  "mask-l-from-25%",
+  "mask-l-from-28",
+  "mask-l-from-30%",
+  "mask-l-from-32",
+  "mask-l-from-35%",
+  "mask-l-from-36",
+  "mask-l-from-40",
+  "mask-l-from-40%",
+  "mask-l-from-44",
+  "mask-l-from-45%",
+  "mask-l-from-48",
+  "mask-l-from-50%",
+  "mask-l-from-52",
+  "mask-l-from-55%",
+  "mask-l-from-56",
+  "mask-l-from-60",
+  "mask-l-from-60%",
+  "mask-l-from-64",
+  "mask-l-from-65%",
+  "mask-l-from-70%",
+  "mask-l-from-72",
+  "mask-l-from-75%",
+  "mask-l-from-80",
+  "mask-l-from-80%",
+  "mask-l-from-85%",
+  "mask-l-from-90%",
+  "mask-l-from-95%",
+  "mask-l-from-96",
+  "mask-l-from-100%",
+  "mask-l-from-current",
+  "mask-l-from-current/0",
+  "mask-l-from-current/5",
+  "mask-l-from-current/10",
+  "mask-l-from-current/15",
+  "mask-l-from-current/20",
+  "mask-l-from-current/25",
+  "mask-l-from-current/30",
+  "mask-l-from-current/35",
+  "mask-l-from-current/40",
+  "mask-l-from-current/45",
+  "mask-l-from-current/50",
+  "mask-l-from-current/55",
+  "mask-l-from-current/60",
+  "mask-l-from-current/65",
+  "mask-l-from-current/70",
+  "mask-l-from-current/75",
+  "mask-l-from-current/80",
+  "mask-l-from-current/85",
+  "mask-l-from-current/90",
+  "mask-l-from-current/95",
+  "mask-l-from-current/100",
+  "mask-l-from-inherit",
+  "mask-l-from-inherit/0",
+  "mask-l-from-inherit/5",
+  "mask-l-from-inherit/10",
+  "mask-l-from-inherit/15",
+  "mask-l-from-inherit/20",
+  "mask-l-from-inherit/25",
+  "mask-l-from-inherit/30",
+  "mask-l-from-inherit/35",
+  "mask-l-from-inherit/40",
+  "mask-l-from-inherit/45",
+  "mask-l-from-inherit/50",
+  "mask-l-from-inherit/55",
+  "mask-l-from-inherit/60",
+  "mask-l-from-inherit/65",
+  "mask-l-from-inherit/70",
+  "mask-l-from-inherit/75",
+  "mask-l-from-inherit/80",
+  "mask-l-from-inherit/85",
+  "mask-l-from-inherit/90",
+  "mask-l-from-inherit/95",
+  "mask-l-from-inherit/100",
+  "mask-l-from-transparent",
+  "mask-l-from-transparent/0",
+  "mask-l-from-transparent/5",
+  "mask-l-from-transparent/10",
+  "mask-l-from-transparent/15",
+  "mask-l-from-transparent/20",
+  "mask-l-from-transparent/25",
+  "mask-l-from-transparent/30",
+  "mask-l-from-transparent/35",
+  "mask-l-from-transparent/40",
+  "mask-l-from-transparent/45",
+  "mask-l-from-transparent/50",
+  "mask-l-from-transparent/55",
+  "mask-l-from-transparent/60",
+  "mask-l-from-transparent/65",
+  "mask-l-from-transparent/70",
+  "mask-l-from-transparent/75",
+  "mask-l-from-transparent/80",
+  "mask-l-from-transparent/85",
+  "mask-l-from-transparent/90",
+  "mask-l-from-transparent/95",
+  "mask-l-from-transparent/100",
+  "mask-l-to-0",
+  "mask-l-to-0%",
+  "mask-l-to-0.5",
+  "mask-l-to-1",
+  "mask-l-to-1.5",
+  "mask-l-to-2",
+  "mask-l-to-2.5",
+  "mask-l-to-3",
+  "mask-l-to-3.5",
+  "mask-l-to-4",
+  "mask-l-to-5",
+  "mask-l-to-5%",
+  "mask-l-to-6",
+  "mask-l-to-7",
+  "mask-l-to-8",
+  "mask-l-to-9",
+  "mask-l-to-10",
+  "mask-l-to-10%",
+  "mask-l-to-11",
+  "mask-l-to-12",
+  "mask-l-to-14",
+  "mask-l-to-15%",
+  "mask-l-to-16",
+  "mask-l-to-20",
+  "mask-l-to-20%",
+  "mask-l-to-24",
+  "mask-l-to-25%",
+  "mask-l-to-28",
+  "mask-l-to-30%",
+  "mask-l-to-32",
+  "mask-l-to-35%",
+  "mask-l-to-36",
+  "mask-l-to-40",
+  "mask-l-to-40%",
+  "mask-l-to-44",
+  "mask-l-to-45%",
+  "mask-l-to-48",
+  "mask-l-to-50%",
+  "mask-l-to-52",
+  "mask-l-to-55%",
+  "mask-l-to-56",
+  "mask-l-to-60",
+  "mask-l-to-60%",
+  "mask-l-to-64",
+  "mask-l-to-65%",
+  "mask-l-to-70%",
+  "mask-l-to-72",
+  "mask-l-to-75%",
+  "mask-l-to-80",
+  "mask-l-to-80%",
+  "mask-l-to-85%",
+  "mask-l-to-90%",
+  "mask-l-to-95%",
+  "mask-l-to-96",
+  "mask-l-to-100%",
+  "mask-l-to-current",
+  "mask-l-to-current/0",
+  "mask-l-to-current/5",
+  "mask-l-to-current/10",
+  "mask-l-to-current/15",
+  "mask-l-to-current/20",
+  "mask-l-to-current/25",
+  "mask-l-to-current/30",
+  "mask-l-to-current/35",
+  "mask-l-to-current/40",
+  "mask-l-to-current/45",
+  "mask-l-to-current/50",
+  "mask-l-to-current/55",
+  "mask-l-to-current/60",
+  "mask-l-to-current/65",
+  "mask-l-to-current/70",
+  "mask-l-to-current/75",
+  "mask-l-to-current/80",
+  "mask-l-to-current/85",
+  "mask-l-to-current/90",
+  "mask-l-to-current/95",
+  "mask-l-to-current/100",
+  "mask-l-to-inherit",
+  "mask-l-to-inherit/0",
+  "mask-l-to-inherit/5",
+  "mask-l-to-inherit/10",
+  "mask-l-to-inherit/15",
+  "mask-l-to-inherit/20",
+  "mask-l-to-inherit/25",
+  "mask-l-to-inherit/30",
+  "mask-l-to-inherit/35",
+  "mask-l-to-inherit/40",
+  "mask-l-to-inherit/45",
+  "mask-l-to-inherit/50",
+  "mask-l-to-inherit/55",
+  "mask-l-to-inherit/60",
+  "mask-l-to-inherit/65",
+  "mask-l-to-inherit/70",
+  "mask-l-to-inherit/75",
+  "mask-l-to-inherit/80",
+  "mask-l-to-inherit/85",
+  "mask-l-to-inherit/90",
+  "mask-l-to-inherit/95",
+  "mask-l-to-inherit/100",
+  "mask-l-to-transparent",
+  "mask-l-to-transparent/0",
+  "mask-l-to-transparent/5",
+  "mask-l-to-transparent/10",
+  "mask-l-to-transparent/15",
+  "mask-l-to-transparent/20",
+  "mask-l-to-transparent/25",
+  "mask-l-to-transparent/30",
+  "mask-l-to-transparent/35",
+  "mask-l-to-transparent/40",
+  "mask-l-to-transparent/45",
+  "mask-l-to-transparent/50",
+  "mask-l-to-transparent/55",
+  "mask-l-to-transparent/60",
+  "mask-l-to-transparent/65",
+  "mask-l-to-transparent/70",
+  "mask-l-to-transparent/75",
+  "mask-l-to-transparent/80",
+  "mask-l-to-transparent/85",
+  "mask-l-to-transparent/90",
+  "mask-l-to-transparent/95",
+  "mask-l-to-transparent/100",
+  "mask-left",
+  "mask-linear-0",
+  "mask-linear-1",
+  "mask-linear-2",
+  "mask-linear-3",
+  "mask-linear-6",
+  "mask-linear-12",
+  "mask-linear-45",
+  "mask-linear-90",
+  "mask-linear-180",
+  "mask-linear-from-0",
+  "mask-linear-from-0%",
+  "mask-linear-from-0.5",
+  "mask-linear-from-1",
+  "mask-linear-from-1.5",
+  "mask-linear-from-2",
+  "mask-linear-from-2.5",
+  "mask-linear-from-3",
+  "mask-linear-from-3.5",
+  "mask-linear-from-4",
+  "mask-linear-from-5",
+  "mask-linear-from-5%",
+  "mask-linear-from-6",
+  "mask-linear-from-7",
+  "mask-linear-from-8",
+  "mask-linear-from-9",
+  "mask-linear-from-10",
+  "mask-linear-from-10%",
+  "mask-linear-from-11",
+  "mask-linear-from-12",
+  "mask-linear-from-14",
+  "mask-linear-from-15%",
+  "mask-linear-from-16",
+  "mask-linear-from-20",
+  "mask-linear-from-20%",
+  "mask-linear-from-24",
+  "mask-linear-from-25%",
+  "mask-linear-from-28",
+  "mask-linear-from-30%",
+  "mask-linear-from-32",
+  "mask-linear-from-35%",
+  "mask-linear-from-36",
+  "mask-linear-from-40",
+  "mask-linear-from-40%",
+  "mask-linear-from-44",
+  "mask-linear-from-45%",
+  "mask-linear-from-48",
+  "mask-linear-from-50%",
+  "mask-linear-from-52",
+  "mask-linear-from-55%",
+  "mask-linear-from-56",
+  "mask-linear-from-60",
+  "mask-linear-from-60%",
+  "mask-linear-from-64",
+  "mask-linear-from-65%",
+  "mask-linear-from-70%",
+  "mask-linear-from-72",
+  "mask-linear-from-75%",
+  "mask-linear-from-80",
+  "mask-linear-from-80%",
+  "mask-linear-from-85%",
+  "mask-linear-from-90%",
+  "mask-linear-from-95%",
+  "mask-linear-from-96",
+  "mask-linear-from-100%",
+  "mask-linear-from-current",
+  "mask-linear-from-current/0",
+  "mask-linear-from-current/5",
+  "mask-linear-from-current/10",
+  "mask-linear-from-current/15",
+  "mask-linear-from-current/20",
+  "mask-linear-from-current/25",
+  "mask-linear-from-current/30",
+  "mask-linear-from-current/35",
+  "mask-linear-from-current/40",
+  "mask-linear-from-current/45",
+  "mask-linear-from-current/50",
+  "mask-linear-from-current/55",
+  "mask-linear-from-current/60",
+  "mask-linear-from-current/65",
+  "mask-linear-from-current/70",
+  "mask-linear-from-current/75",
+  "mask-linear-from-current/80",
+  "mask-linear-from-current/85",
+  "mask-linear-from-current/90",
+  "mask-linear-from-current/95",
+  "mask-linear-from-current/100",
+  "mask-linear-from-inherit",
+  "mask-linear-from-inherit/0",
+  "mask-linear-from-inherit/5",
+  "mask-linear-from-inherit/10",
+  "mask-linear-from-inherit/15",
+  "mask-linear-from-inherit/20",
+  "mask-linear-from-inherit/25",
+  "mask-linear-from-inherit/30",
+  "mask-linear-from-inherit/35",
+  "mask-linear-from-inherit/40",
+  "mask-linear-from-inherit/45",
+  "mask-linear-from-inherit/50",
+  "mask-linear-from-inherit/55",
+  "mask-linear-from-inherit/60",
+  "mask-linear-from-inherit/65",
+  "mask-linear-from-inherit/70",
+  "mask-linear-from-inherit/75",
+  "mask-linear-from-inherit/80",
+  "mask-linear-from-inherit/85",
+  "mask-linear-from-inherit/90",
+  "mask-linear-from-inherit/95",
+  "mask-linear-from-inherit/100",
+  "mask-linear-from-transparent",
+  "mask-linear-from-transparent/0",
+  "mask-linear-from-transparent/5",
+  "mask-linear-from-transparent/10",
+  "mask-linear-from-transparent/15",
+  "mask-linear-from-transparent/20",
+  "mask-linear-from-transparent/25",
+  "mask-linear-from-transparent/30",
+  "mask-linear-from-transparent/35",
+  "mask-linear-from-transparent/40",
+  "mask-linear-from-transparent/45",
+  "mask-linear-from-transparent/50",
+  "mask-linear-from-transparent/55",
+  "mask-linear-from-transparent/60",
+  "mask-linear-from-transparent/65",
+  "mask-linear-from-transparent/70",
+  "mask-linear-from-transparent/75",
+  "mask-linear-from-transparent/80",
+  "mask-linear-from-transparent/85",
+  "mask-linear-from-transparent/90",
+  "mask-linear-from-transparent/95",
+  "mask-linear-from-transparent/100",
+  "mask-linear-to-0",
+  "mask-linear-to-0%",
+  "mask-linear-to-0.5",
+  "mask-linear-to-1",
+  "mask-linear-to-1.5",
+  "mask-linear-to-2",
+  "mask-linear-to-2.5",
+  "mask-linear-to-3",
+  "mask-linear-to-3.5",
+  "mask-linear-to-4",
+  "mask-linear-to-5",
+  "mask-linear-to-5%",
+  "mask-linear-to-6",
+  "mask-linear-to-7",
+  "mask-linear-to-8",
+  "mask-linear-to-9",
+  "mask-linear-to-10",
+  "mask-linear-to-10%",
+  "mask-linear-to-11",
+  "mask-linear-to-12",
+  "mask-linear-to-14",
+  "mask-linear-to-15%",
+  "mask-linear-to-16",
+  "mask-linear-to-20",
+  "mask-linear-to-20%",
+  "mask-linear-to-24",
+  "mask-linear-to-25%",
+  "mask-linear-to-28",
+  "mask-linear-to-30%",
+  "mask-linear-to-32",
+  "mask-linear-to-35%",
+  "mask-linear-to-36",
+  "mask-linear-to-40",
+  "mask-linear-to-40%",
+  "mask-linear-to-44",
+  "mask-linear-to-45%",
+  "mask-linear-to-48",
+  "mask-linear-to-50%",
+  "mask-linear-to-52",
+  "mask-linear-to-55%",
+  "mask-linear-to-56",
+  "mask-linear-to-60",
+  "mask-linear-to-60%",
+  "mask-linear-to-64",
+  "mask-linear-to-65%",
+  "mask-linear-to-70%",
+  "mask-linear-to-72",
+  "mask-linear-to-75%",
+  "mask-linear-to-80",
+  "mask-linear-to-80%",
+  "mask-linear-to-85%",
+  "mask-linear-to-90%",
+  "mask-linear-to-95%",
+  "mask-linear-to-96",
+  "mask-linear-to-100%",
+  "mask-linear-to-current",
+  "mask-linear-to-current/0",
+  "mask-linear-to-current/5",
+  "mask-linear-to-current/10",
+  "mask-linear-to-current/15",
+  "mask-linear-to-current/20",
+  "mask-linear-to-current/25",
+  "mask-linear-to-current/30",
+  "mask-linear-to-current/35",
+  "mask-linear-to-current/40",
+  "mask-linear-to-current/45",
+  "mask-linear-to-current/50",
+  "mask-linear-to-current/55",
+  "mask-linear-to-current/60",
+  "mask-linear-to-current/65",
+  "mask-linear-to-current/70",
+  "mask-linear-to-current/75",
+  "mask-linear-to-current/80",
+  "mask-linear-to-current/85",
+  "mask-linear-to-current/90",
+  "mask-linear-to-current/95",
+  "mask-linear-to-current/100",
+  "mask-linear-to-inherit",
+  "mask-linear-to-inherit/0",
+  "mask-linear-to-inherit/5",
+  "mask-linear-to-inherit/10",
+  "mask-linear-to-inherit/15",
+  "mask-linear-to-inherit/20",
+  "mask-linear-to-inherit/25",
+  "mask-linear-to-inherit/30",
+  "mask-linear-to-inherit/35",
+  "mask-linear-to-inherit/40",
+  "mask-linear-to-inherit/45",
+  "mask-linear-to-inherit/50",
+  "mask-linear-to-inherit/55",
+  "mask-linear-to-inherit/60",
+  "mask-linear-to-inherit/65",
+  "mask-linear-to-inherit/70",
+  "mask-linear-to-inherit/75",
+  "mask-linear-to-inherit/80",
+  "mask-linear-to-inherit/85",
+  "mask-linear-to-inherit/90",
+  "mask-linear-to-inherit/95",
+  "mask-linear-to-inherit/100",
+  "mask-linear-to-transparent",
+  "mask-linear-to-transparent/0",
+  "mask-linear-to-transparent/5",
+  "mask-linear-to-transparent/10",
+  "mask-linear-to-transparent/15",
+  "mask-linear-to-transparent/20",
+  "mask-linear-to-transparent/25",
+  "mask-linear-to-transparent/30",
+  "mask-linear-to-transparent/35",
+  "mask-linear-to-transparent/40",
+  "mask-linear-to-transparent/45",
+  "mask-linear-to-transparent/50",
+  "mask-linear-to-transparent/55",
+  "mask-linear-to-transparent/60",
+  "mask-linear-to-transparent/65",
+  "mask-linear-to-transparent/70",
+  "mask-linear-to-transparent/75",
+  "mask-linear-to-transparent/80",
+  "mask-linear-to-transparent/85",
+  "mask-linear-to-transparent/90",
+  "mask-linear-to-transparent/95",
+  "mask-linear-to-transparent/100",
+  "mask-luminance",
+  "mask-match",
+  "mask-no-clip",
+  "mask-no-repeat",
+  "mask-none",
+  "mask-origin-border",
+  "mask-origin-content",
+  "mask-origin-fill",
+  "mask-origin-padding",
+  "mask-origin-stroke",
+  "mask-origin-view",
+  "mask-r-from-0",
+  "mask-r-from-0%",
+  "mask-r-from-0.5",
+  "mask-r-from-1",
+  "mask-r-from-1.5",
+  "mask-r-from-2",
+  "mask-r-from-2.5",
+  "mask-r-from-3",
+  "mask-r-from-3.5",
+  "mask-r-from-4",
+  "mask-r-from-5",
+  "mask-r-from-5%",
+  "mask-r-from-6",
+  "mask-r-from-7",
+  "mask-r-from-8",
+  "mask-r-from-9",
+  "mask-r-from-10",
+  "mask-r-from-10%",
+  "mask-r-from-11",
+  "mask-r-from-12",
+  "mask-r-from-14",
+  "mask-r-from-15%",
+  "mask-r-from-16",
+  "mask-r-from-20",
+  "mask-r-from-20%",
+  "mask-r-from-24",
+  "mask-r-from-25%",
+  "mask-r-from-28",
+  "mask-r-from-30%",
+  "mask-r-from-32",
+  "mask-r-from-35%",
+  "mask-r-from-36",
+  "mask-r-from-40",
+  "mask-r-from-40%",
+  "mask-r-from-44",
+  "mask-r-from-45%",
+  "mask-r-from-48",
+  "mask-r-from-50%",
+  "mask-r-from-52",
+  "mask-r-from-55%",
+  "mask-r-from-56",
+  "mask-r-from-60",
+  "mask-r-from-60%",
+  "mask-r-from-64",
+  "mask-r-from-65%",
+  "mask-r-from-70%",
+  "mask-r-from-72",
+  "mask-r-from-75%",
+  "mask-r-from-80",
+  "mask-r-from-80%",
+  "mask-r-from-85%",
+  "mask-r-from-90%",
+  "mask-r-from-95%",
+  "mask-r-from-96",
+  "mask-r-from-100%",
+  "mask-r-from-current",
+  "mask-r-from-current/0",
+  "mask-r-from-current/5",
+  "mask-r-from-current/10",
+  "mask-r-from-current/15",
+  "mask-r-from-current/20",
+  "mask-r-from-current/25",
+  "mask-r-from-current/30",
+  "mask-r-from-current/35",
+  "mask-r-from-current/40",
+  "mask-r-from-current/45",
+  "mask-r-from-current/50",
+  "mask-r-from-current/55",
+  "mask-r-from-current/60",
+  "mask-r-from-current/65",
+  "mask-r-from-current/70",
+  "mask-r-from-current/75",
+  "mask-r-from-current/80",
+  "mask-r-from-current/85",
+  "mask-r-from-current/90",
+  "mask-r-from-current/95",
+  "mask-r-from-current/100",
+  "mask-r-from-inherit",
+  "mask-r-from-inherit/0",
+  "mask-r-from-inherit/5",
+  "mask-r-from-inherit/10",
+  "mask-r-from-inherit/15",
+  "mask-r-from-inherit/20",
+  "mask-r-from-inherit/25",
+  "mask-r-from-inherit/30",
+  "mask-r-from-inherit/35",
+  "mask-r-from-inherit/40",
+  "mask-r-from-inherit/45",
+  "mask-r-from-inherit/50",
+  "mask-r-from-inherit/55",
+  "mask-r-from-inherit/60",
+  "mask-r-from-inherit/65",
+  "mask-r-from-inherit/70",
+  "mask-r-from-inherit/75",
+  "mask-r-from-inherit/80",
+  "mask-r-from-inherit/85",
+  "mask-r-from-inherit/90",
+  "mask-r-from-inherit/95",
+  "mask-r-from-inherit/100",
+  "mask-r-from-transparent",
+  "mask-r-from-transparent/0",
+  "mask-r-from-transparent/5",
+  "mask-r-from-transparent/10",
+  "mask-r-from-transparent/15",
+  "mask-r-from-transparent/20",
+  "mask-r-from-transparent/25",
+  "mask-r-from-transparent/30",
+  "mask-r-from-transparent/35",
+  "mask-r-from-transparent/40",
+  "mask-r-from-transparent/45",
+  "mask-r-from-transparent/50",
+  "mask-r-from-transparent/55",
+  "mask-r-from-transparent/60",
+  "mask-r-from-transparent/65",
+  "mask-r-from-transparent/70",
+  "mask-r-from-transparent/75",
+  "mask-r-from-transparent/80",
+  "mask-r-from-transparent/85",
+  "mask-r-from-transparent/90",
+  "mask-r-from-transparent/95",
+  "mask-r-from-transparent/100",
+  "mask-r-to-0",
+  "mask-r-to-0%",
+  "mask-r-to-0.5",
+  "mask-r-to-1",
+  "mask-r-to-1.5",
+  "mask-r-to-2",
+  "mask-r-to-2.5",
+  "mask-r-to-3",
+  "mask-r-to-3.5",
+  "mask-r-to-4",
+  "mask-r-to-5",
+  "mask-r-to-5%",
+  "mask-r-to-6",
+  "mask-r-to-7",
+  "mask-r-to-8",
+  "mask-r-to-9",
+  "mask-r-to-10",
+  "mask-r-to-10%",
+  "mask-r-to-11",
+  "mask-r-to-12",
+  "mask-r-to-14",
+  "mask-r-to-15%",
+  "mask-r-to-16",
+  "mask-r-to-20",
+  "mask-r-to-20%",
+  "mask-r-to-24",
+  "mask-r-to-25%",
+  "mask-r-to-28",
+  "mask-r-to-30%",
+  "mask-r-to-32",
+  "mask-r-to-35%",
+  "mask-r-to-36",
+  "mask-r-to-40",
+  "mask-r-to-40%",
+  "mask-r-to-44",
+  "mask-r-to-45%",
+  "mask-r-to-48",
+  "mask-r-to-50%",
+  "mask-r-to-52",
+  "mask-r-to-55%",
+  "mask-r-to-56",
+  "mask-r-to-60",
+  "mask-r-to-60%",
+  "mask-r-to-64",
+  "mask-r-to-65%",
+  "mask-r-to-70%",
+  "mask-r-to-72",
+  "mask-r-to-75%",
+  "mask-r-to-80",
+  "mask-r-to-80%",
+  "mask-r-to-85%",
+  "mask-r-to-90%",
+  "mask-r-to-95%",
+  "mask-r-to-96",
+  "mask-r-to-100%",
+  "mask-r-to-current",
+  "mask-r-to-current/0",
+  "mask-r-to-current/5",
+  "mask-r-to-current/10",
+  "mask-r-to-current/15",
+  "mask-r-to-current/20",
+  "mask-r-to-current/25",
+  "mask-r-to-current/30",
+  "mask-r-to-current/35",
+  "mask-r-to-current/40",
+  "mask-r-to-current/45",
+  "mask-r-to-current/50",
+  "mask-r-to-current/55",
+  "mask-r-to-current/60",
+  "mask-r-to-current/65",
+  "mask-r-to-current/70",
+  "mask-r-to-current/75",
+  "mask-r-to-current/80",
+  "mask-r-to-current/85",
+  "mask-r-to-current/90",
+  "mask-r-to-current/95",
+  "mask-r-to-current/100",
+  "mask-r-to-inherit",
+  "mask-r-to-inherit/0",
+  "mask-r-to-inherit/5",
+  "mask-r-to-inherit/10",
+  "mask-r-to-inherit/15",
+  "mask-r-to-inherit/20",
+  "mask-r-to-inherit/25",
+  "mask-r-to-inherit/30",
+  "mask-r-to-inherit/35",
+  "mask-r-to-inherit/40",
+  "mask-r-to-inherit/45",
+  "mask-r-to-inherit/50",
+  "mask-r-to-inherit/55",
+  "mask-r-to-inherit/60",
+  "mask-r-to-inherit/65",
+  "mask-r-to-inherit/70",
+  "mask-r-to-inherit/75",
+  "mask-r-to-inherit/80",
+  "mask-r-to-inherit/85",
+  "mask-r-to-inherit/90",
+  "mask-r-to-inherit/95",
+  "mask-r-to-inherit/100",
+  "mask-r-to-transparent",
+  "mask-r-to-transparent/0",
+  "mask-r-to-transparent/5",
+  "mask-r-to-transparent/10",
+  "mask-r-to-transparent/15",
+  "mask-r-to-transparent/20",
+  "mask-r-to-transparent/25",
+  "mask-r-to-transparent/30",
+  "mask-r-to-transparent/35",
+  "mask-r-to-transparent/40",
+  "mask-r-to-transparent/45",
+  "mask-r-to-transparent/50",
+  "mask-r-to-transparent/55",
+  "mask-r-to-transparent/60",
+  "mask-r-to-transparent/65",
+  "mask-r-to-transparent/70",
+  "mask-r-to-transparent/75",
+  "mask-r-to-transparent/80",
+  "mask-r-to-transparent/85",
+  "mask-r-to-transparent/90",
+  "mask-r-to-transparent/95",
+  "mask-r-to-transparent/100",
+  "mask-radial-at-bottom",
+  "mask-radial-at-bottom-left",
+  "mask-radial-at-bottom-right",
+  "mask-radial-at-center",
+  "mask-radial-at-left",
+  "mask-radial-at-right",
+  "mask-radial-at-top",
+  "mask-radial-at-top-left",
+  "mask-radial-at-top-right",
+  "mask-radial-closest-corner",
+  "mask-radial-closest-side",
+  "mask-radial-farthest-corner",
+  "mask-radial-farthest-side",
+  "mask-radial-from-0",
+  "mask-radial-from-0%",
+  "mask-radial-from-0.5",
+  "mask-radial-from-1",
+  "mask-radial-from-1.5",
+  "mask-radial-from-2",
+  "mask-radial-from-2.5",
+  "mask-radial-from-3",
+  "mask-radial-from-3.5",
+  "mask-radial-from-4",
+  "mask-radial-from-5",
+  "mask-radial-from-5%",
+  "mask-radial-from-6",
+  "mask-radial-from-7",
+  "mask-radial-from-8",
+  "mask-radial-from-9",
+  "mask-radial-from-10",
+  "mask-radial-from-10%",
+  "mask-radial-from-11",
+  "mask-radial-from-12",
+  "mask-radial-from-14",
+  "mask-radial-from-15%",
+  "mask-radial-from-16",
+  "mask-radial-from-20",
+  "mask-radial-from-20%",
+  "mask-radial-from-24",
+  "mask-radial-from-25%",
+  "mask-radial-from-28",
+  "mask-radial-from-30%",
+  "mask-radial-from-32",
+  "mask-radial-from-35%",
+  "mask-radial-from-36",
+  "mask-radial-from-40",
+  "mask-radial-from-40%",
+  "mask-radial-from-44",
+  "mask-radial-from-45%",
+  "mask-radial-from-48",
+  "mask-radial-from-50%",
+  "mask-radial-from-52",
+  "mask-radial-from-55%",
+  "mask-radial-from-56",
+  "mask-radial-from-60",
+  "mask-radial-from-60%",
+  "mask-radial-from-64",
+  "mask-radial-from-65%",
+  "mask-radial-from-70%",
+  "mask-radial-from-72",
+  "mask-radial-from-75%",
+  "mask-radial-from-80",
+  "mask-radial-from-80%",
+  "mask-radial-from-85%",
+  "mask-radial-from-90%",
+  "mask-radial-from-95%",
+  "mask-radial-from-96",
+  "mask-radial-from-100%",
+  "mask-radial-from-current",
+  "mask-radial-from-current/0",
+  "mask-radial-from-current/5",
+  "mask-radial-from-current/10",
+  "mask-radial-from-current/15",
+  "mask-radial-from-current/20",
+  "mask-radial-from-current/25",
+  "mask-radial-from-current/30",
+  "mask-radial-from-current/35",
+  "mask-radial-from-current/40",
+  "mask-radial-from-current/45",
+  "mask-radial-from-current/50",
+  "mask-radial-from-current/55",
+  "mask-radial-from-current/60",
+  "mask-radial-from-current/65",
+  "mask-radial-from-current/70",
+  "mask-radial-from-current/75",
+  "mask-radial-from-current/80",
+  "mask-radial-from-current/85",
+  "mask-radial-from-current/90",
+  "mask-radial-from-current/95",
+  "mask-radial-from-current/100",
+  "mask-radial-from-inherit",
+  "mask-radial-from-inherit/0",
+  "mask-radial-from-inherit/5",
+  "mask-radial-from-inherit/10",
+  "mask-radial-from-inherit/15",
+  "mask-radial-from-inherit/20",
+  "mask-radial-from-inherit/25",
+  "mask-radial-from-inherit/30",
+  "mask-radial-from-inherit/35",
+  "mask-radial-from-inherit/40",
+  "mask-radial-from-inherit/45",
+  "mask-radial-from-inherit/50",
+  "mask-radial-from-inherit/55",
+  "mask-radial-from-inherit/60",
+  "mask-radial-from-inherit/65",
+  "mask-radial-from-inherit/70",
+  "mask-radial-from-inherit/75",
+  "mask-radial-from-inherit/80",
+  "mask-radial-from-inherit/85",
+  "mask-radial-from-inherit/90",
+  "mask-radial-from-inherit/95",
+  "mask-radial-from-inherit/100",
+  "mask-radial-from-transparent",
+  "mask-radial-from-transparent/0",
+  "mask-radial-from-transparent/5",
+  "mask-radial-from-transparent/10",
+  "mask-radial-from-transparent/15",
+  "mask-radial-from-transparent/20",
+  "mask-radial-from-transparent/25",
+  "mask-radial-from-transparent/30",
+  "mask-radial-from-transparent/35",
+  "mask-radial-from-transparent/40",
+  "mask-radial-from-transparent/45",
+  "mask-radial-from-transparent/50",
+  "mask-radial-from-transparent/55",
+  "mask-radial-from-transparent/60",
+  "mask-radial-from-transparent/65",
+  "mask-radial-from-transparent/70",
+  "mask-radial-from-transparent/75",
+  "mask-radial-from-transparent/80",
+  "mask-radial-from-transparent/85",
+  "mask-radial-from-transparent/90",
+  "mask-radial-from-transparent/95",
+  "mask-radial-from-transparent/100",
+  "mask-radial-to-0",
+  "mask-radial-to-0%",
+  "mask-radial-to-0.5",
+  "mask-radial-to-1",
+  "mask-radial-to-1.5",
+  "mask-radial-to-2",
+  "mask-radial-to-2.5",
+  "mask-radial-to-3",
+  "mask-radial-to-3.5",
+  "mask-radial-to-4",
+  "mask-radial-to-5",
+  "mask-radial-to-5%",
+  "mask-radial-to-6",
+  "mask-radial-to-7",
+  "mask-radial-to-8",
+  "mask-radial-to-9",
+  "mask-radial-to-10",
+  "mask-radial-to-10%",
+  "mask-radial-to-11",
+  "mask-radial-to-12",
+  "mask-radial-to-14",
+  "mask-radial-to-15%",
+  "mask-radial-to-16",
+  "mask-radial-to-20",
+  "mask-radial-to-20%",
+  "mask-radial-to-24",
+  "mask-radial-to-25%",
+  "mask-radial-to-28",
+  "mask-radial-to-30%",
+  "mask-radial-to-32",
+  "mask-radial-to-35%",
+  "mask-radial-to-36",
+  "mask-radial-to-40",
+  "mask-radial-to-40%",
+  "mask-radial-to-44",
+  "mask-radial-to-45%",
+  "mask-radial-to-48",
+  "mask-radial-to-50%",
+  "mask-radial-to-52",
+  "mask-radial-to-55%",
+  "mask-radial-to-56",
+  "mask-radial-to-60",
+  "mask-radial-to-60%",
+  "mask-radial-to-64",
+  "mask-radial-to-65%",
+  "mask-radial-to-70%",
+  "mask-radial-to-72",
+  "mask-radial-to-75%",
+  "mask-radial-to-80",
+  "mask-radial-to-80%",
+  "mask-radial-to-85%",
+  "mask-radial-to-90%",
+  "mask-radial-to-95%",
+  "mask-radial-to-96",
+  "mask-radial-to-100%",
+  "mask-radial-to-current",
+  "mask-radial-to-current/0",
+  "mask-radial-to-current/5",
+  "mask-radial-to-current/10",
+  "mask-radial-to-current/15",
+  "mask-radial-to-current/20",
+  "mask-radial-to-current/25",
+  "mask-radial-to-current/30",
+  "mask-radial-to-current/35",
+  "mask-radial-to-current/40",
+  "mask-radial-to-current/45",
+  "mask-radial-to-current/50",
+  "mask-radial-to-current/55",
+  "mask-radial-to-current/60",
+  "mask-radial-to-current/65",
+  "mask-radial-to-current/70",
+  "mask-radial-to-current/75",
+  "mask-radial-to-current/80",
+  "mask-radial-to-current/85",
+  "mask-radial-to-current/90",
+  "mask-radial-to-current/95",
+  "mask-radial-to-current/100",
+  "mask-radial-to-inherit",
+  "mask-radial-to-inherit/0",
+  "mask-radial-to-inherit/5",
+  "mask-radial-to-inherit/10",
+  "mask-radial-to-inherit/15",
+  "mask-radial-to-inherit/20",
+  "mask-radial-to-inherit/25",
+  "mask-radial-to-inherit/30",
+  "mask-radial-to-inherit/35",
+  "mask-radial-to-inherit/40",
+  "mask-radial-to-inherit/45",
+  "mask-radial-to-inherit/50",
+  "mask-radial-to-inherit/55",
+  "mask-radial-to-inherit/60",
+  "mask-radial-to-inherit/65",
+  "mask-radial-to-inherit/70",
+  "mask-radial-to-inherit/75",
+  "mask-radial-to-inherit/80",
+  "mask-radial-to-inherit/85",
+  "mask-radial-to-inherit/90",
+  "mask-radial-to-inherit/95",
+  "mask-radial-to-inherit/100",
+  "mask-radial-to-transparent",
+  "mask-radial-to-transparent/0",
+  "mask-radial-to-transparent/5",
+  "mask-radial-to-transparent/10",
+  "mask-radial-to-transparent/15",
+  "mask-radial-to-transparent/20",
+  "mask-radial-to-transparent/25",
+  "mask-radial-to-transparent/30",
+  "mask-radial-to-transparent/35",
+  "mask-radial-to-transparent/40",
+  "mask-radial-to-transparent/45",
+  "mask-radial-to-transparent/50",
+  "mask-radial-to-transparent/55",
+  "mask-radial-to-transparent/60",
+  "mask-radial-to-transparent/65",
+  "mask-radial-to-transparent/70",
+  "mask-radial-to-transparent/75",
+  "mask-radial-to-transparent/80",
+  "mask-radial-to-transparent/85",
+  "mask-radial-to-transparent/90",
+  "mask-radial-to-transparent/95",
+  "mask-radial-to-transparent/100",
+  "mask-repeat",
+  "mask-repeat-round",
+  "mask-repeat-space",
+  "mask-repeat-x",
+  "mask-repeat-y",
+  "mask-right",
+  "mask-subtract",
+  "mask-t-from-0",
+  "mask-t-from-0%",
+  "mask-t-from-0.5",
+  "mask-t-from-1",
+  "mask-t-from-1.5",
+  "mask-t-from-2",
+  "mask-t-from-2.5",
+  "mask-t-from-3",
+  "mask-t-from-3.5",
+  "mask-t-from-4",
+  "mask-t-from-5",
+  "mask-t-from-5%",
+  "mask-t-from-6",
+  "mask-t-from-7",
+  "mask-t-from-8",
+  "mask-t-from-9",
+  "mask-t-from-10",
+  "mask-t-from-10%",
+  "mask-t-from-11",
+  "mask-t-from-12",
+  "mask-t-from-14",
+  "mask-t-from-15%",
+  "mask-t-from-16",
+  "mask-t-from-20",
+  "mask-t-from-20%",
+  "mask-t-from-24",
+  "mask-t-from-25%",
+  "mask-t-from-28",
+  "mask-t-from-30%",
+  "mask-t-from-32",
+  "mask-t-from-35%",
+  "mask-t-from-36",
+  "mask-t-from-40",
+  "mask-t-from-40%",
+  "mask-t-from-44",
+  "mask-t-from-45%",
+  "mask-t-from-48",
+  "mask-t-from-50%",
+  "mask-t-from-52",
+  "mask-t-from-55%",
+  "mask-t-from-56",
+  "mask-t-from-60",
+  "mask-t-from-60%",
+  "mask-t-from-64",
+  "mask-t-from-65%",
+  "mask-t-from-70%",
+  "mask-t-from-72",
+  "mask-t-from-75%",
+  "mask-t-from-80",
+  "mask-t-from-80%",
+  "mask-t-from-85%",
+  "mask-t-from-90%",
+  "mask-t-from-95%",
+  "mask-t-from-96",
+  "mask-t-from-100%",
+  "mask-t-from-current",
+  "mask-t-from-current/0",
+  "mask-t-from-current/5",
+  "mask-t-from-current/10",
+  "mask-t-from-current/15",
+  "mask-t-from-current/20",
+  "mask-t-from-current/25",
+  "mask-t-from-current/30",
+  "mask-t-from-current/35",
+  "mask-t-from-current/40",
+  "mask-t-from-current/45",
+  "mask-t-from-current/50",
+  "mask-t-from-current/55",
+  "mask-t-from-current/60",
+  "mask-t-from-current/65",
+  "mask-t-from-current/70",
+  "mask-t-from-current/75",
+  "mask-t-from-current/80",
+  "mask-t-from-current/85",
+  "mask-t-from-current/90",
+  "mask-t-from-current/95",
+  "mask-t-from-current/100",
+  "mask-t-from-inherit",
+  "mask-t-from-inherit/0",
+  "mask-t-from-inherit/5",
+  "mask-t-from-inherit/10",
+  "mask-t-from-inherit/15",
+  "mask-t-from-inherit/20",
+  "mask-t-from-inherit/25",
+  "mask-t-from-inherit/30",
+  "mask-t-from-inherit/35",
+  "mask-t-from-inherit/40",
+  "mask-t-from-inherit/45",
+  "mask-t-from-inherit/50",
+  "mask-t-from-inherit/55",
+  "mask-t-from-inherit/60",
+  "mask-t-from-inherit/65",
+  "mask-t-from-inherit/70",
+  "mask-t-from-inherit/75",
+  "mask-t-from-inherit/80",
+  "mask-t-from-inherit/85",
+  "mask-t-from-inherit/90",
+  "mask-t-from-inherit/95",
+  "mask-t-from-inherit/100",
+  "mask-t-from-transparent",
+  "mask-t-from-transparent/0",
+  "mask-t-from-transparent/5",
+  "mask-t-from-transparent/10",
+  "mask-t-from-transparent/15",
+  "mask-t-from-transparent/20",
+  "mask-t-from-transparent/25",
+  "mask-t-from-transparent/30",
+  "mask-t-from-transparent/35",
+  "mask-t-from-transparent/40",
+  "mask-t-from-transparent/45",
+  "mask-t-from-transparent/50",
+  "mask-t-from-transparent/55",
+  "mask-t-from-transparent/60",
+  "mask-t-from-transparent/65",
+  "mask-t-from-transparent/70",
+  "mask-t-from-transparent/75",
+  "mask-t-from-transparent/80",
+  "mask-t-from-transparent/85",
+  "mask-t-from-transparent/90",
+  "mask-t-from-transparent/95",
+  "mask-t-from-transparent/100",
+  "mask-t-to-0",
+  "mask-t-to-0%",
+  "mask-t-to-0.5",
+  "mask-t-to-1",
+  "mask-t-to-1.5",
+  "mask-t-to-2",
+  "mask-t-to-2.5",
+  "mask-t-to-3",
+  "mask-t-to-3.5",
+  "mask-t-to-4",
+  "mask-t-to-5",
+  "mask-t-to-5%",
+  "mask-t-to-6",
+  "mask-t-to-7",
+  "mask-t-to-8",
+  "mask-t-to-9",
+  "mask-t-to-10",
+  "mask-t-to-10%",
+  "mask-t-to-11",
+  "mask-t-to-12",
+  "mask-t-to-14",
+  "mask-t-to-15%",
+  "mask-t-to-16",
+  "mask-t-to-20",
+  "mask-t-to-20%",
+  "mask-t-to-24",
+  "mask-t-to-25%",
+  "mask-t-to-28",
+  "mask-t-to-30%",
+  "mask-t-to-32",
+  "mask-t-to-35%",
+  "mask-t-to-36",
+  "mask-t-to-40",
+  "mask-t-to-40%",
+  "mask-t-to-44",
+  "mask-t-to-45%",
+  "mask-t-to-48",
+  "mask-t-to-50%",
+  "mask-t-to-52",
+  "mask-t-to-55%",
+  "mask-t-to-56",
+  "mask-t-to-60",
+  "mask-t-to-60%",
+  "mask-t-to-64",
+  "mask-t-to-65%",
+  "mask-t-to-70%",
+  "mask-t-to-72",
+  "mask-t-to-75%",
+  "mask-t-to-80",
+  "mask-t-to-80%",
+  "mask-t-to-85%",
+  "mask-t-to-90%",
+  "mask-t-to-95%",
+  "mask-t-to-96",
+  "mask-t-to-100%",
+  "mask-t-to-current",
+  "mask-t-to-current/0",
+  "mask-t-to-current/5",
+  "mask-t-to-current/10",
+  "mask-t-to-current/15",
+  "mask-t-to-current/20",
+  "mask-t-to-current/25",
+  "mask-t-to-current/30",
+  "mask-t-to-current/35",
+  "mask-t-to-current/40",
+  "mask-t-to-current/45",
+  "mask-t-to-current/50",
+  "mask-t-to-current/55",
+  "mask-t-to-current/60",
+  "mask-t-to-current/65",
+  "mask-t-to-current/70",
+  "mask-t-to-current/75",
+  "mask-t-to-current/80",
+  "mask-t-to-current/85",
+  "mask-t-to-current/90",
+  "mask-t-to-current/95",
+  "mask-t-to-current/100",
+  "mask-t-to-inherit",
+  "mask-t-to-inherit/0",
+  "mask-t-to-inherit/5",
+  "mask-t-to-inherit/10",
+  "mask-t-to-inherit/15",
+  "mask-t-to-inherit/20",
+  "mask-t-to-inherit/25",
+  "mask-t-to-inherit/30",
+  "mask-t-to-inherit/35",
+  "mask-t-to-inherit/40",
+  "mask-t-to-inherit/45",
+  "mask-t-to-inherit/50",
+  "mask-t-to-inherit/55",
+  "mask-t-to-inherit/60",
+  "mask-t-to-inherit/65",
+  "mask-t-to-inherit/70",
+  "mask-t-to-inherit/75",
+  "mask-t-to-inherit/80",
+  "mask-t-to-inherit/85",
+  "mask-t-to-inherit/90",
+  "mask-t-to-inherit/95",
+  "mask-t-to-inherit/100",
+  "mask-t-to-transparent",
+  "mask-t-to-transparent/0",
+  "mask-t-to-transparent/5",
+  "mask-t-to-transparent/10",
+  "mask-t-to-transparent/15",
+  "mask-t-to-transparent/20",
+  "mask-t-to-transparent/25",
+  "mask-t-to-transparent/30",
+  "mask-t-to-transparent/35",
+  "mask-t-to-transparent/40",
+  "mask-t-to-transparent/45",
+  "mask-t-to-transparent/50",
+  "mask-t-to-transparent/55",
+  "mask-t-to-transparent/60",
+  "mask-t-to-transparent/65",
+  "mask-t-to-transparent/70",
+  "mask-t-to-transparent/75",
+  "mask-t-to-transparent/80",
+  "mask-t-to-transparent/85",
+  "mask-t-to-transparent/90",
+  "mask-t-to-transparent/95",
+  "mask-t-to-transparent/100",
+  "mask-top",
+  "mask-top-left",
+  "mask-top-right",
+  "mask-type-alpha",
+  "mask-type-luminance",
+  "mask-x-from-0",
+  "mask-x-from-0%",
+  "mask-x-from-0.5",
+  "mask-x-from-1",
+  "mask-x-from-1.5",
+  "mask-x-from-2",
+  "mask-x-from-2.5",
+  "mask-x-from-3",
+  "mask-x-from-3.5",
+  "mask-x-from-4",
+  "mask-x-from-5",
+  "mask-x-from-5%",
+  "mask-x-from-6",
+  "mask-x-from-7",
+  "mask-x-from-8",
+  "mask-x-from-9",
+  "mask-x-from-10",
+  "mask-x-from-10%",
+  "mask-x-from-11",
+  "mask-x-from-12",
+  "mask-x-from-14",
+  "mask-x-from-15%",
+  "mask-x-from-16",
+  "mask-x-from-20",
+  "mask-x-from-20%",
+  "mask-x-from-24",
+  "mask-x-from-25%",
+  "mask-x-from-28",
+  "mask-x-from-30%",
+  "mask-x-from-32",
+  "mask-x-from-35%",
+  "mask-x-from-36",
+  "mask-x-from-40",
+  "mask-x-from-40%",
+  "mask-x-from-44",
+  "mask-x-from-45%",
+  "mask-x-from-48",
+  "mask-x-from-50%",
+  "mask-x-from-52",
+  "mask-x-from-55%",
+  "mask-x-from-56",
+  "mask-x-from-60",
+  "mask-x-from-60%",
+  "mask-x-from-64",
+  "mask-x-from-65%",
+  "mask-x-from-70%",
+  "mask-x-from-72",
+  "mask-x-from-75%",
+  "mask-x-from-80",
+  "mask-x-from-80%",
+  "mask-x-from-85%",
+  "mask-x-from-90%",
+  "mask-x-from-95%",
+  "mask-x-from-96",
+  "mask-x-from-100%",
+  "mask-x-from-current",
+  "mask-x-from-current/0",
+  "mask-x-from-current/5",
+  "mask-x-from-current/10",
+  "mask-x-from-current/15",
+  "mask-x-from-current/20",
+  "mask-x-from-current/25",
+  "mask-x-from-current/30",
+  "mask-x-from-current/35",
+  "mask-x-from-current/40",
+  "mask-x-from-current/45",
+  "mask-x-from-current/50",
+  "mask-x-from-current/55",
+  "mask-x-from-current/60",
+  "mask-x-from-current/65",
+  "mask-x-from-current/70",
+  "mask-x-from-current/75",
+  "mask-x-from-current/80",
+  "mask-x-from-current/85",
+  "mask-x-from-current/90",
+  "mask-x-from-current/95",
+  "mask-x-from-current/100",
+  "mask-x-from-inherit",
+  "mask-x-from-inherit/0",
+  "mask-x-from-inherit/5",
+  "mask-x-from-inherit/10",
+  "mask-x-from-inherit/15",
+  "mask-x-from-inherit/20",
+  "mask-x-from-inherit/25",
+  "mask-x-from-inherit/30",
+  "mask-x-from-inherit/35",
+  "mask-x-from-inherit/40",
+  "mask-x-from-inherit/45",
+  "mask-x-from-inherit/50",
+  "mask-x-from-inherit/55",
+  "mask-x-from-inherit/60",
+  "mask-x-from-inherit/65",
+  "mask-x-from-inherit/70",
+  "mask-x-from-inherit/75",
+  "mask-x-from-inherit/80",
+  "mask-x-from-inherit/85",
+  "mask-x-from-inherit/90",
+  "mask-x-from-inherit/95",
+  "mask-x-from-inherit/100",
+  "mask-x-from-transparent",
+  "mask-x-from-transparent/0",
+  "mask-x-from-transparent/5",
+  "mask-x-from-transparent/10",
+  "mask-x-from-transparent/15",
+  "mask-x-from-transparent/20",
+  "mask-x-from-transparent/25",
+  "mask-x-from-transparent/30",
+  "mask-x-from-transparent/35",
+  "mask-x-from-transparent/40",
+  "mask-x-from-transparent/45",
+  "mask-x-from-transparent/50",
+  "mask-x-from-transparent/55",
+  "mask-x-from-transparent/60",
+  "mask-x-from-transparent/65",
+  "mask-x-from-transparent/70",
+  "mask-x-from-transparent/75",
+  "mask-x-from-transparent/80",
+  "mask-x-from-transparent/85",
+  "mask-x-from-transparent/90",
+  "mask-x-from-transparent/95",
+  "mask-x-from-transparent/100",
+  "mask-x-to-0",
+  "mask-x-to-0%",
+  "mask-x-to-0.5",
+  "mask-x-to-1",
+  "mask-x-to-1.5",
+  "mask-x-to-2",
+  "mask-x-to-2.5",
+  "mask-x-to-3",
+  "mask-x-to-3.5",
+  "mask-x-to-4",
+  "mask-x-to-5",
+  "mask-x-to-5%",
+  "mask-x-to-6",
+  "mask-x-to-7",
+  "mask-x-to-8",
+  "mask-x-to-9",
+  "mask-x-to-10",
+  "mask-x-to-10%",
+  "mask-x-to-11",
+  "mask-x-to-12",
+  "mask-x-to-14",
+  "mask-x-to-15%",
+  "mask-x-to-16",
+  "mask-x-to-20",
+  "mask-x-to-20%",
+  "mask-x-to-24",
+  "mask-x-to-25%",
+  "mask-x-to-28",
+  "mask-x-to-30%",
+  "mask-x-to-32",
+  "mask-x-to-35%",
+  "mask-x-to-36",
+  "mask-x-to-40",
+  "mask-x-to-40%",
+  "mask-x-to-44",
+  "mask-x-to-45%",
+  "mask-x-to-48",
+  "mask-x-to-50%",
+  "mask-x-to-52",
+  "mask-x-to-55%",
+  "mask-x-to-56",
+  "mask-x-to-60",
+  "mask-x-to-60%",
+  "mask-x-to-64",
+  "mask-x-to-65%",
+  "mask-x-to-70%",
+  "mask-x-to-72",
+  "mask-x-to-75%",
+  "mask-x-to-80",
+  "mask-x-to-80%",
+  "mask-x-to-85%",
+  "mask-x-to-90%",
+  "mask-x-to-95%",
+  "mask-x-to-96",
+  "mask-x-to-100%",
+  "mask-x-to-current",
+  "mask-x-to-current/0",
+  "mask-x-to-current/5",
+  "mask-x-to-current/10",
+  "mask-x-to-current/15",
+  "mask-x-to-current/20",
+  "mask-x-to-current/25",
+  "mask-x-to-current/30",
+  "mask-x-to-current/35",
+  "mask-x-to-current/40",
+  "mask-x-to-current/45",
+  "mask-x-to-current/50",
+  "mask-x-to-current/55",
+  "mask-x-to-current/60",
+  "mask-x-to-current/65",
+  "mask-x-to-current/70",
+  "mask-x-to-current/75",
+  "mask-x-to-current/80",
+  "mask-x-to-current/85",
+  "mask-x-to-current/90",
+  "mask-x-to-current/95",
+  "mask-x-to-current/100",
+  "mask-x-to-inherit",
+  "mask-x-to-inherit/0",
+  "mask-x-to-inherit/5",
+  "mask-x-to-inherit/10",
+  "mask-x-to-inherit/15",
+  "mask-x-to-inherit/20",
+  "mask-x-to-inherit/25",
+  "mask-x-to-inherit/30",
+  "mask-x-to-inherit/35",
+  "mask-x-to-inherit/40",
+  "mask-x-to-inherit/45",
+  "mask-x-to-inherit/50",
+  "mask-x-to-inherit/55",
+  "mask-x-to-inherit/60",
+  "mask-x-to-inherit/65",
+  "mask-x-to-inherit/70",
+  "mask-x-to-inherit/75",
+  "mask-x-to-inherit/80",
+  "mask-x-to-inherit/85",
+  "mask-x-to-inherit/90",
+  "mask-x-to-inherit/95",
+  "mask-x-to-inherit/100",
+  "mask-x-to-transparent",
+  "mask-x-to-transparent/0",
+  "mask-x-to-transparent/5",
+  "mask-x-to-transparent/10",
+  "mask-x-to-transparent/15",
+  "mask-x-to-transparent/20",
+  "mask-x-to-transparent/25",
+  "mask-x-to-transparent/30",
+  "mask-x-to-transparent/35",
+  "mask-x-to-transparent/40",
+  "mask-x-to-transparent/45",
+  "mask-x-to-transparent/50",
+  "mask-x-to-transparent/55",
+  "mask-x-to-transparent/60",
+  "mask-x-to-transparent/65",
+  "mask-x-to-transparent/70",
+  "mask-x-to-transparent/75",
+  "mask-x-to-transparent/80",
+  "mask-x-to-transparent/85",
+  "mask-x-to-transparent/90",
+  "mask-x-to-transparent/95",
+  "mask-x-to-transparent/100",
+  "mask-y-from-0",
+  "mask-y-from-0%",
+  "mask-y-from-0.5",
+  "mask-y-from-1",
+  "mask-y-from-1.5",
+  "mask-y-from-2",
+  "mask-y-from-2.5",
+  "mask-y-from-3",
+  "mask-y-from-3.5",
+  "mask-y-from-4",
+  "mask-y-from-5",
+  "mask-y-from-5%",
+  "mask-y-from-6",
+  "mask-y-from-7",
+  "mask-y-from-8",
+  "mask-y-from-9",
+  "mask-y-from-10",
+  "mask-y-from-10%",
+  "mask-y-from-11",
+  "mask-y-from-12",
+  "mask-y-from-14",
+  "mask-y-from-15%",
+  "mask-y-from-16",
+  "mask-y-from-20",
+  "mask-y-from-20%",
+  "mask-y-from-24",
+  "mask-y-from-25%",
+  "mask-y-from-28",
+  "mask-y-from-30%",
+  "mask-y-from-32",
+  "mask-y-from-35%",
+  "mask-y-from-36",
+  "mask-y-from-40",
+  "mask-y-from-40%",
+  "mask-y-from-44",
+  "mask-y-from-45%",
+  "mask-y-from-48",
+  "mask-y-from-50%",
+  "mask-y-from-52",
+  "mask-y-from-55%",
+  "mask-y-from-56",
+  "mask-y-from-60",
+  "mask-y-from-60%",
+  "mask-y-from-64",
+  "mask-y-from-65%",
+  "mask-y-from-70%",
+  "mask-y-from-72",
+  "mask-y-from-75%",
+  "mask-y-from-80",
+  "mask-y-from-80%",
+  "mask-y-from-85%",
+  "mask-y-from-90%",
+  "mask-y-from-95%",
+  "mask-y-from-96",
+  "mask-y-from-100%",
+  "mask-y-from-current",
+  "mask-y-from-current/0",
+  "mask-y-from-current/5",
+  "mask-y-from-current/10",
+  "mask-y-from-current/15",
+  "mask-y-from-current/20",
+  "mask-y-from-current/25",
+  "mask-y-from-current/30",
+  "mask-y-from-current/35",
+  "mask-y-from-current/40",
+  "mask-y-from-current/45",
+  "mask-y-from-current/50",
+  "mask-y-from-current/55",
+  "mask-y-from-current/60",
+  "mask-y-from-current/65",
+  "mask-y-from-current/70",
+  "mask-y-from-current/75",
+  "mask-y-from-current/80",
+  "mask-y-from-current/85",
+  "mask-y-from-current/90",
+  "mask-y-from-current/95",
+  "mask-y-from-current/100",
+  "mask-y-from-inherit",
+  "mask-y-from-inherit/0",
+  "mask-y-from-inherit/5",
+  "mask-y-from-inherit/10",
+  "mask-y-from-inherit/15",
+  "mask-y-from-inherit/20",
+  "mask-y-from-inherit/25",
+  "mask-y-from-inherit/30",
+  "mask-y-from-inherit/35",
+  "mask-y-from-inherit/40",
+  "mask-y-from-inherit/45",
+  "mask-y-from-inherit/50",
+  "mask-y-from-inherit/55",
+  "mask-y-from-inherit/60",
+  "mask-y-from-inherit/65",
+  "mask-y-from-inherit/70",
+  "mask-y-from-inherit/75",
+  "mask-y-from-inherit/80",
+  "mask-y-from-inherit/85",
+  "mask-y-from-inherit/90",
+  "mask-y-from-inherit/95",
+  "mask-y-from-inherit/100",
+  "mask-y-from-transparent",
+  "mask-y-from-transparent/0",
+  "mask-y-from-transparent/5",
+  "mask-y-from-transparent/10",
+  "mask-y-from-transparent/15",
+  "mask-y-from-transparent/20",
+  "mask-y-from-transparent/25",
+  "mask-y-from-transparent/30",
+  "mask-y-from-transparent/35",
+  "mask-y-from-transparent/40",
+  "mask-y-from-transparent/45",
+  "mask-y-from-transparent/50",
+  "mask-y-from-transparent/55",
+  "mask-y-from-transparent/60",
+  "mask-y-from-transparent/65",
+  "mask-y-from-transparent/70",
+  "mask-y-from-transparent/75",
+  "mask-y-from-transparent/80",
+  "mask-y-from-transparent/85",
+  "mask-y-from-transparent/90",
+  "mask-y-from-transparent/95",
+  "mask-y-from-transparent/100",
+  "mask-y-to-0",
+  "mask-y-to-0%",
+  "mask-y-to-0.5",
+  "mask-y-to-1",
+  "mask-y-to-1.5",
+  "mask-y-to-2",
+  "mask-y-to-2.5",
+  "mask-y-to-3",
+  "mask-y-to-3.5",
+  "mask-y-to-4",
+  "mask-y-to-5",
+  "mask-y-to-5%",
+  "mask-y-to-6",
+  "mask-y-to-7",
+  "mask-y-to-8",
+  "mask-y-to-9",
+  "mask-y-to-10",
+  "mask-y-to-10%",
+  "mask-y-to-11",
+  "mask-y-to-12",
+  "mask-y-to-14",
+  "mask-y-to-15%",
+  "mask-y-to-16",
+  "mask-y-to-20",
+  "mask-y-to-20%",
+  "mask-y-to-24",
+  "mask-y-to-25%",
+  "mask-y-to-28",
+  "mask-y-to-30%",
+  "mask-y-to-32",
+  "mask-y-to-35%",
+  "mask-y-to-36",
+  "mask-y-to-40",
+  "mask-y-to-40%",
+  "mask-y-to-44",
+  "mask-y-to-45%",
+  "mask-y-to-48",
+  "mask-y-to-50%",
+  "mask-y-to-52",
+  "mask-y-to-55%",
+  "mask-y-to-56",
+  "mask-y-to-60",
+  "mask-y-to-60%",
+  "mask-y-to-64",
+  "mask-y-to-65%",
+  "mask-y-to-70%",
+  "mask-y-to-72",
+  "mask-y-to-75%",
+  "mask-y-to-80",
+  "mask-y-to-80%",
+  "mask-y-to-85%",
+  "mask-y-to-90%",
+  "mask-y-to-95%",
+  "mask-y-to-96",
+  "mask-y-to-100%",
+  "mask-y-to-current",
+  "mask-y-to-current/0",
+  "mask-y-to-current/5",
+  "mask-y-to-current/10",
+  "mask-y-to-current/15",
+  "mask-y-to-current/20",
+  "mask-y-to-current/25",
+  "mask-y-to-current/30",
+  "mask-y-to-current/35",
+  "mask-y-to-current/40",
+  "mask-y-to-current/45",
+  "mask-y-to-current/50",
+  "mask-y-to-current/55",
+  "mask-y-to-current/60",
+  "mask-y-to-current/65",
+  "mask-y-to-current/70",
+  "mask-y-to-current/75",
+  "mask-y-to-current/80",
+  "mask-y-to-current/85",
+  "mask-y-to-current/90",
+  "mask-y-to-current/95",
+  "mask-y-to-current/100",
+  "mask-y-to-inherit",
+  "mask-y-to-inherit/0",
+  "mask-y-to-inherit/5",
+  "mask-y-to-inherit/10",
+  "mask-y-to-inherit/15",
+  "mask-y-to-inherit/20",
+  "mask-y-to-inherit/25",
+  "mask-y-to-inherit/30",
+  "mask-y-to-inherit/35",
+  "mask-y-to-inherit/40",
+  "mask-y-to-inherit/45",
+  "mask-y-to-inherit/50",
+  "mask-y-to-inherit/55",
+  "mask-y-to-inherit/60",
+  "mask-y-to-inherit/65",
+  "mask-y-to-inherit/70",
+  "mask-y-to-inherit/75",
+  "mask-y-to-inherit/80",
+  "mask-y-to-inherit/85",
+  "mask-y-to-inherit/90",
+  "mask-y-to-inherit/95",
+  "mask-y-to-inherit/100",
+  "mask-y-to-transparent",
+  "mask-y-to-transparent/0",
+  "mask-y-to-transparent/5",
+  "mask-y-to-transparent/10",
+  "mask-y-to-transparent/15",
+  "mask-y-to-transparent/20",
+  "mask-y-to-transparent/25",
+  "mask-y-to-transparent/30",
+  "mask-y-to-transparent/35",
+  "mask-y-to-transparent/40",
+  "mask-y-to-transparent/45",
+  "mask-y-to-transparent/50",
+  "mask-y-to-transparent/55",
+  "mask-y-to-transparent/60",
+  "mask-y-to-transparent/65",
+  "mask-y-to-transparent/70",
+  "mask-y-to-transparent/75",
+  "mask-y-to-transparent/80",
+  "mask-y-to-transparent/85",
+  "mask-y-to-transparent/90",
+  "mask-y-to-transparent/95",
+  "mask-y-to-transparent/100",
   "max-h-0",
   "max-h-0.5",
   "max-h-1",
diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts
index f5c00bf656a9..d38f5b6b62ae 100644
--- a/packages/tailwindcss/src/feature-flags.ts
+++ b/packages/tailwindcss/src/feature-flags.ts
@@ -9,3 +9,4 @@ export const enableSourceNot = process.env.FEATURES_ENV !== 'stable'
 export const enableTextShadows = process.env.FEATURES_ENV !== 'stable'
 export const enableUserValid = process.env.FEATURES_ENV !== 'stable'
 export const enableWrapAnywhere = process.env.FEATURES_ENV !== 'stable'
+export const enableMaskUtilities = process.env.FEATURES_ENV !== 'stable'
diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts
index f2ed4bc51721..f024f69771a0 100644
--- a/packages/tailwindcss/src/property-order.ts
+++ b/packages/tailwindcss/src/property-order.ts
@@ -234,6 +234,59 @@ export default [
   '--tw-gradient-to',
   '--tw-gradient-to-position',
 
+  'mask-image',
+
+  // Edge masks
+  '--tw-mask-top',
+  '--tw-mask-top-from-color',
+  '--tw-mask-top-from-position',
+  '--tw-mask-top-to-color',
+  '--tw-mask-top-to-position',
+
+  '--tw-mask-right',
+  '--tw-mask-right-from-color',
+  '--tw-mask-right-from-position',
+  '--tw-mask-right-to-color',
+  '--tw-mask-right-to-position',
+
+  '--tw-mask-bottom',
+  '--tw-mask-bottom-from-color',
+  '--tw-mask-bottom-from-position',
+  '--tw-mask-bottom-to-color',
+  '--tw-mask-bottom-to-position',
+
+  '--tw-mask-left',
+  '--tw-mask-left-from-color',
+  '--tw-mask-left-from-position',
+  '--tw-mask-left-to-color',
+  '--tw-mask-left-to-position',
+
+  // Linear masks
+  '--tw-mask-linear',
+  '--tw-mask-linear-position',
+  '--tw-mask-linear-from-color',
+  '--tw-mask-linear-from-position',
+  '--tw-mask-linear-to-color',
+  '--tw-mask-linear-to-position',
+
+  // Radial masks
+  '--tw-mask-radial',
+  '--tw-mask-radial-shape',
+  '--tw-mask-radial-size',
+  '--tw-mask-radial-position',
+  '--tw-mask-radial-from-color',
+  '--tw-mask-radial-from-position',
+  '--tw-mask-radial-to-color',
+  '--tw-mask-radial-to-position',
+
+  // Conic masks
+  '--tw-mask-conic',
+  '--tw-mask-conic-position',
+  '--tw-mask-conic-from-color',
+  '--tw-mask-conic-from-position',
+  '--tw-mask-conic-to-color',
+  '--tw-mask-conic-to-position',
+
   'box-decoration-break',
 
   'background-size',
@@ -243,6 +296,15 @@ export default [
   'background-repeat',
   'background-origin',
 
+  'mask-composite',
+  'mask-mode',
+  'mask-type',
+  'mask-size',
+  'mask-clip',
+  'mask-position',
+  'mask-repeat',
+  'mask-origin',
+
   'fill',
   'stroke',
   'stroke-width',
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 1386dba4253a..ba4c29ee86e3 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -11564,6 +11564,5385 @@ test('to', async () => {
   ).toEqual('')
 })
 
+test('mask', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+      [
+        // mask-image
+        'mask-none',
+        'mask-[linear-gradient(#ffff,#0000)]',
+        'mask-[url(http://example.com)]',
+        'mask-[var(--some-var)]',
+        'mask-[image:var(--some-var)]',
+        'mask-[url:var(--some-var)]',
+
+        // mask-composite
+        'mask-add',
+        'mask-subtract',
+        'mask-intersect',
+        'mask-exclude',
+
+        // mask-mode
+        'mask-alpha',
+        'mask-luminance',
+        'mask-match',
+
+        // mask-type
+        'mask-type-alpha',
+        'mask-type-luminance',
+
+        // mask-size
+        'mask-auto',
+        'mask-cover',
+        'mask-contain',
+        'mask-[cover]',
+        'mask-[contain]',
+        'mask-[size:120px_120px]',
+
+        // mask-position
+        'mask-center',
+        'mask-top',
+        'mask-top-right',
+        'mask-top-left',
+        'mask-bottom',
+        'mask-bottom-right',
+        'mask-bottom-left',
+        'mask-left',
+        'mask-right',
+        'mask-center',
+        'mask-[50%]',
+        'mask-[120px]',
+        'mask-[120px_120px]',
+        'mask-[length:120px_120px]',
+        'mask-[position:120px_120px]',
+
+        // mask-repeat
+        'mask-repeat',
+        'mask-no-repeat',
+        'mask-repeat-x',
+        'mask-repeat-y',
+        'mask-repeat-round',
+        'mask-repeat-space',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-\\[image\\:var\\(--some-var\\)\\] {
+      -webkit-mask-image: var(--some-var);
+      -webkit-mask-image: var(--some-var);
+      mask-image: var(--some-var);
+    }
+
+    .mask-\\[linear-gradient\\(\\#ffff\\,\\#0000\\)\\] {
+      -webkit-mask-image: linear-gradient(#fff, #0000);
+      mask-image: linear-gradient(#fff, #0000);
+    }
+
+    .mask-\\[url\\(http\\:\\/\\/example\\.com\\)\\] {
+      -webkit-mask-image: url("http://example.com");
+      mask-image: url("http://example.com");
+    }
+
+    .mask-\\[url\\:var\\(--some-var\\)\\], .mask-\\[var\\(--some-var\\)\\] {
+      -webkit-mask-image: var(--some-var);
+      -webkit-mask-image: var(--some-var);
+      mask-image: var(--some-var);
+    }
+
+    .mask-none {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+
+    .mask-add {
+      -webkit-mask-composite: source-over;
+      -webkit-mask-composite: source-over;
+      mask-composite: add;
+    }
+
+    .mask-exclude {
+      -webkit-mask-composite: xor;
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+
+    .mask-intersect {
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-subtract {
+      -webkit-mask-composite: source-out;
+      -webkit-mask-composite: source-out;
+      mask-composite: subtract;
+    }
+
+    .mask-alpha {
+      -webkit-mask-source-type: alpha;
+      -webkit-mask-source-type: alpha;
+      mask-mode: alpha;
+    }
+
+    .mask-luminance {
+      -webkit-mask-source-type: luminance;
+      -webkit-mask-source-type: luminance;
+      mask-mode: luminance;
+    }
+
+    .mask-match {
+      -webkit-mask-source-type: auto;
+      -webkit-mask-source-type: auto;
+      mask-mode: match-source;
+    }
+
+    .mask-type-alpha {
+      mask-type: alpha;
+    }
+
+    .mask-type-luminance {
+      mask-type: luminance;
+    }
+
+    .mask-\\[contain\\] {
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+
+    .mask-\\[cover\\] {
+      -webkit-mask-size: cover;
+      mask-size: cover;
+    }
+
+    .mask-\\[length\\:120px_120px\\], .mask-\\[size\\:120px_120px\\] {
+      -webkit-mask-size: 120px 120px;
+      mask-size: 120px 120px;
+    }
+
+    .mask-auto {
+      -webkit-mask-size: auto;
+      mask-size: auto;
+    }
+
+    .mask-contain {
+      -webkit-mask-size: contain;
+      mask-size: contain;
+    }
+
+    .mask-cover {
+      -webkit-mask-size: cover;
+      mask-size: cover;
+    }
+
+    .mask-\\[50\\%\\] {
+      -webkit-mask-position: 50%;
+      mask-position: 50%;
+    }
+
+    .mask-\\[120px\\] {
+      -webkit-mask-position: 120px;
+      mask-position: 120px;
+    }
+
+    .mask-\\[120px_120px\\], .mask-\\[position\\:120px_120px\\] {
+      -webkit-mask-position: 120px 120px;
+      mask-position: 120px 120px;
+    }
+
+    .mask-bottom {
+      -webkit-mask-position: bottom;
+      mask-position: bottom;
+    }
+
+    .mask-bottom-left {
+      -webkit-mask-position: 0 100%;
+      mask-position: 0 100%;
+    }
+
+    .mask-bottom-right {
+      -webkit-mask-position: 100% 100%;
+      mask-position: 100% 100%;
+    }
+
+    .mask-center {
+      -webkit-mask-position: center;
+      mask-position: center;
+    }
+
+    .mask-left {
+      -webkit-mask-position: 0;
+      mask-position: 0;
+    }
+
+    .mask-right {
+      -webkit-mask-position: 100%;
+      mask-position: 100%;
+    }
+
+    .mask-top {
+      -webkit-mask-position: top;
+      mask-position: top;
+    }
+
+    .mask-top-left {
+      -webkit-mask-position: 0 0;
+      mask-position: 0 0;
+    }
+
+    .mask-top-right {
+      -webkit-mask-position: 100% 0;
+      mask-position: 100% 0;
+    }
+
+    .mask-no-repeat {
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+    }
+
+    .mask-repeat {
+      -webkit-mask-repeat: repeat;
+      mask-repeat: repeat;
+    }
+
+    .mask-repeat-round {
+      -webkit-mask-repeat: round;
+      mask-repeat: round;
+    }
+
+    .mask-repeat-space {
+      -webkit-mask-repeat: space;
+      mask-repeat: space;
+    }
+
+    .mask-repeat-x {
+      -webkit-mask-repeat: repeat-x;
+      mask-repeat: repeat-x;
+    }
+
+    .mask-repeat-y {
+      -webkit-mask-repeat: repeat-y;
+      mask-repeat: repeat-y;
+    }"
+  `)
+  expect(
+    await run([
+      'mask',
+      'mask-unknown',
+
+      // mask-image
+      '-mask-none',
+      'mask-none/foo',
+      '-mask-[var(--some-var)]',
+      'mask-[var(--some-var)]/foo',
+      '-mask-[image:var(--some-var)]',
+      'mask-[image:var(--some-var)]/foo',
+      '-mask-[url:var(--some-var)]',
+      'mask-[url:var(--some-var)]/foo',
+
+      // mask-composite
+      '-mask-add',
+      '-mask-subtract',
+      '-mask-intersect',
+      '-mask-exclude',
+      'mask-add/foo',
+      'mask-subtract/foo',
+      'mask-intersect/foo',
+      'mask-exclude/foo',
+
+      // mask-mode
+      '-mask-alpha',
+      '-mask-luminance',
+      '-mask-match',
+      'mask-alpha/foo',
+      'mask-luminance/foo',
+      'mask-match/foo',
+
+      // mask-type
+      '-mask-type-alpha',
+      '-mask-type-luminance',
+      'mask-type-alpha/foo',
+      'mask-type-luminance/foo',
+
+      // mask-size
+      '-mask-auto',
+      '-mask-cover',
+      '-mask-contain',
+      '-mask-auto/foo',
+      '-mask-cover/foo',
+      '-mask-contain/foo',
+
+      // mask-position
+      '-mask-center',
+      '-mask-top',
+      '-mask-right-top',
+      '-mask-right-bottom',
+      '-mask-bottom',
+      '-mask-left-bottom',
+      '-mask-left',
+      '-mask-left-top',
+      '-mask-center/foo',
+      '-mask-top/foo',
+      '-mask-right-top/foo',
+      '-mask-right-bottom/foo',
+      '-mask-bottom/foo',
+      '-mask-left-bottom/foo',
+      '-mask-left/foo',
+      '-mask-left-top/foo',
+
+      // mask-repeat
+      'mask-repeat/foo',
+      'mask-no-repeat/foo',
+      'mask-repeat-x/foo',
+      'mask-repeat-y/foo',
+      'mask-round/foo',
+      'mask-space/foo',
+      '-mask-repeat',
+      '-mask-no-repeat',
+      '-mask-repeat-x',
+      '-mask-repeat-y',
+      '-mask-round',
+      '-mask-space',
+      '-mask-repeat/foo',
+      '-mask-no-repeat/foo',
+      '-mask-repeat-x/foo',
+      '-mask-repeat-y/foo',
+      '-mask-round/foo',
+      '-mask-space/foo',
+    ]),
+  ).toEqual('')
+
+  expect(
+    await compileCss(
+      css`
+        @theme reference {
+          --opacity-half: 0.5;
+          --opacity-custom: var(--custom-opacity);
+        }
+        @tailwind utilities;
+      `,
+      ['mask-current/half', 'mask-current/custom', '[color:red]/half'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".\\[color\\:red\\]\\/half {
+      color: color-mix(in oklab, red var(--opacity-half, .5), transparent);
+    }"
+  `)
+})
+
+test('mask-position', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+      ['mask-position-[120px]', 'mask-position-[120px_120px]', 'mask-position-[var(--some-var)]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-position-\\[120px\\] {
+      -webkit-mask-position: 120px;
+      mask-position: 120px;
+    }
+
+    .mask-position-\\[120px_120px\\] {
+      -webkit-mask-position: 120px 120px;
+      mask-position: 120px 120px;
+    }
+
+    .mask-position-\\[var\\(--some-var\\)\\] {
+      -webkit-mask-position: var(--some-var);
+      -webkit-mask-position: var(--some-var);
+      mask-position: var(--some-var);
+    }"
+  `)
+  expect(
+    await run([
+      'mask-position',
+      'mask-position/foo',
+      '-mask-position',
+      '-mask-position/foo',
+
+      'mask-position-[120px_120px]/foo',
+
+      '-mask-position-[120px_120px]',
+      '-mask-position-[120px_120px]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-size', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --color-red-500: #ef4444;
+        }
+        @tailwind utilities;
+      `,
+      ['mask-size-[120px]', 'mask-size-[120px_120px]', 'mask-size-[var(--some-var)]'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-size-\\[120px\\] {
+      -webkit-mask-size: 120px;
+      mask-size: 120px;
+    }
+
+    .mask-size-\\[120px_120px\\] {
+      -webkit-mask-size: 120px 120px;
+      mask-size: 120px 120px;
+    }
+
+    .mask-size-\\[var\\(--some-var\\)\\] {
+      -webkit-mask-size: var(--some-var);
+      -webkit-mask-size: var(--some-var);
+      mask-size: var(--some-var);
+    }"
+  `)
+  expect(
+    await run([
+      'mask-size',
+      'mask-size/foo',
+      '-mask-size',
+      '-mask-size/foo',
+
+      'mask-size-[120px_120px]/foo',
+
+      '-mask-size-[120px_120px]',
+      '-mask-size-[120px_120px]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-t-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-from-0',
+        'mask-t-from-1.5',
+        'mask-t-from-2',
+        'mask-t-from-0%',
+        'mask-t-from-2%',
+        'mask-t-from-[0px]',
+        'mask-t-from-[0%]',
+        'mask-t-from-(--my-var)',
+        'mask-t-from-(color:--my-var)',
+        'mask-t-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-t-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-\\(--my-var\\), .mask-t-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-from',
+        'mask-t-from-2.8175',
+        'mask-t-from--1.5',
+        'mask-t-from--2',
+
+        'mask-t-from-2.5%',
+        'mask-t-from--5%',
+        'mask-t-from-unknown',
+        'mask-t-from-unknown%',
+
+        '-mask-t-from-0',
+        '-mask-t-from-1.5',
+        '-mask-t-from-2',
+        '-mask-t-from-0%',
+        '-mask-t-from-2%',
+        '-mask-t-from-[0px]',
+        '-mask-t-from-[0%]',
+
+        '-mask-t-from-(--my-var)',
+        '-mask-t-from-(color:--my-var)',
+        '-mask-t-from-(length:--my-var)',
+
+        'mask-l-from-[-25%]',
+        'mask-l-from-[25%]/foo',
+        'mask-l-from-[-25%]/foo',
+        '-mask-l-from-[-25%]',
+        '-mask-l-from-[25%]/foo',
+        '-mask-l-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-t-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-to-0',
+        'mask-t-to-1.5',
+        'mask-t-to-2',
+        'mask-t-to-0%',
+        'mask-t-to-2%',
+        'mask-t-to-[0px]',
+        'mask-t-to-[0%]',
+        'mask-t-to-(--my-var)',
+        'mask-t-to-(color:--my-var)',
+        'mask-t-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-t-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-\\(--my-var\\), .mask-t-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-t-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-t-to',
+        'mask-t-to-2.8175',
+        'mask-t-to--1.5',
+        'mask-t-to--2',
+
+        'mask-t-to-2.5%',
+        'mask-t-to--5%',
+        'mask-t-to-unknown',
+        'mask-t-to-unknown%',
+
+        '-mask-t-to-0',
+        '-mask-t-to-1.5',
+        '-mask-t-to-2',
+        '-mask-t-to-0%',
+        '-mask-t-to-2%',
+        '-mask-t-to-[0px]',
+        '-mask-t-to-[0%]',
+
+        '-mask-t-to-(--my-var)',
+        '-mask-t-to-(color:--my-var)',
+        '-mask-t-to-(length:--my-var)',
+
+        'mask-l-from-[-25%]',
+        'mask-l-from-[25%]/foo',
+        'mask-l-from-[-25%]/foo',
+        '-mask-l-from-[-25%]',
+        '-mask-l-from-[25%]/foo',
+        '-mask-l-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-r-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-from-0',
+        'mask-r-from-1.5',
+        'mask-r-from-2',
+        'mask-r-from-0%',
+        'mask-r-from-2%',
+        'mask-r-from-[0px]',
+        'mask-r-from-[0%]',
+
+        'mask-r-from-(--my-var)',
+        'mask-r-from-(color:--my-var)',
+        'mask-r-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-r-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-\\(--my-var\\), .mask-r-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-from',
+        'mask-r-from-2.8175',
+        'mask-r-from--1.5',
+        'mask-r-from--2',
+
+        'mask-r-from-2.5%',
+        'mask-r-from--5%',
+        'mask-r-from-unknown',
+        'mask-r-from-unknown%',
+
+        '-mask-r-from-0',
+        '-mask-r-from-1.5',
+        '-mask-r-from-2',
+        '-mask-r-from-0%',
+        '-mask-r-from-2%',
+        '-mask-r-from-[0px]',
+        '-mask-r-from-[0%]',
+
+        '-mask-r-from-(--my-var)',
+        '-mask-r-from-(color:--my-var)',
+        '-mask-r-from-(length:--my-var)',
+
+        'mask-r-from-[-25%]',
+        'mask-r-from-[25%]/foo',
+        'mask-r-from-[-25%]/foo',
+        '-mask-r-from-[-25%]',
+        '-mask-r-from-[25%]/foo',
+        '-mask-r-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-r-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-to-0',
+        'mask-r-to-1.5',
+        'mask-r-to-2',
+        'mask-r-to-0%',
+        'mask-r-to-2%',
+        'mask-r-to-[0px]',
+        'mask-r-to-[0%]',
+
+        'mask-r-to-(--my-var)',
+        'mask-r-to-(color:--my-var)',
+        'mask-r-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-r-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-\\(--my-var\\), .mask-r-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-r-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-r-to',
+        'mask-r-to-2.8175',
+        'mask-r-to--1.5',
+        'mask-r-to--2',
+
+        'mask-r-to-2.5%',
+        'mask-r-to--5%',
+        'mask-r-to-unknown',
+        'mask-r-to-unknown%',
+
+        '-mask-r-to-0',
+        '-mask-r-to-1.5',
+        '-mask-r-to-2',
+        '-mask-r-to-0%',
+        '-mask-r-to-2%',
+        '-mask-r-to-[0px]',
+        '-mask-r-to-[0%]',
+
+        '-mask-r-to-(--my-var)',
+        '-mask-r-to-(color:--my-var)',
+        '-mask-r-to-(length:--my-var)',
+
+        'mask-r-to-[-25%]',
+        'mask-r-to-[25%]/foo',
+        'mask-r-to-[-25%]/foo',
+        '-mask-r-to-[-25%]',
+        '-mask-r-to-[25%]/foo',
+        '-mask-r-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-b-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-from-0',
+        'mask-b-from-1.5',
+        'mask-b-from-2',
+        'mask-b-from-0%',
+        'mask-b-from-2%',
+        'mask-b-from-[0px]',
+        'mask-b-from-[0%]',
+
+        'mask-b-from-(--my-var)',
+        'mask-b-from-(color:--my-var)',
+        'mask-b-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-b-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-\\(--my-var\\), .mask-b-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-from',
+        'mask-b-from-2.8175',
+        'mask-b-from--1.5',
+        'mask-b-from--2',
+
+        'mask-b-from-2.5%',
+        'mask-b-from--5%',
+        'mask-b-from-unknown',
+        'mask-b-from-unknown%',
+
+        '-mask-b-from-0',
+        '-mask-b-from-1.5',
+        '-mask-b-from-2',
+        '-mask-b-from-0%',
+        '-mask-b-from-2%',
+        '-mask-b-from-[0px]',
+        '-mask-b-from-[0%]',
+
+        '-mask-b-from-(--my-var)',
+        '-mask-b-from-(color:--my-var)',
+        '-mask-b-from-(length:--my-var)',
+
+        'mask-b-from-[-25%]',
+        'mask-b-from-[25%]/foo',
+        'mask-b-from-[-25%]/foo',
+        '-mask-b-from-[-25%]',
+        '-mask-b-from-[25%]/foo',
+        '-mask-b-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-b-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-to-0',
+        'mask-b-to-1.5',
+        'mask-b-to-2',
+        'mask-b-to-0%',
+        'mask-b-to-2%',
+        'mask-b-to-[0px]',
+        'mask-b-to-[0%]',
+
+        'mask-b-to-(--my-var)',
+        'mask-b-to-(color:--my-var)',
+        'mask-b-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-b-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-\\(--my-var\\), .mask-b-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-b-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-b-to',
+        'mask-b-to-2.8175',
+        'mask-b-to--1.5',
+        'mask-b-to--2',
+
+        'mask-b-to-2.5%',
+        'mask-b-to--5%',
+        'mask-b-to-unknown',
+        'mask-b-to-unknown%',
+
+        '-mask-b-to-0',
+        '-mask-b-to-1.5',
+        '-mask-b-to-2',
+        '-mask-b-to-0%',
+        '-mask-b-to-2%',
+        '-mask-b-to-[0px]',
+        '-mask-b-to-[0%]',
+
+        '-mask-b-to-(--my-var)',
+        '-mask-b-to-(color:--my-var)',
+        '-mask-b-to-(length:--my-var)',
+
+        'mask-b-to-[-25%]',
+        'mask-b-to-[25%]/foo',
+        'mask-b-to-[-25%]/foo',
+        '-mask-b-to-[-25%]',
+        '-mask-b-to-[25%]/foo',
+        '-mask-b-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-l-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-from-0',
+        'mask-l-from-1.5',
+        'mask-l-from-2',
+        'mask-l-from-0%',
+        'mask-l-from-2%',
+        'mask-l-from-[0px]',
+        'mask-l-from-[0%]',
+
+        'mask-l-from-(--my-var)',
+        'mask-l-from-(color:--my-var)',
+        'mask-l-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-l-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-\\(--my-var\\), .mask-l-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-from',
+        'mask-l-from-2.8175',
+        'mask-l-from--1.5',
+        'mask-l-from--2',
+
+        'mask-l-from-2.5%',
+        'mask-l-from--5%',
+        'mask-l-from-unknown',
+        'mask-l-from-unknown%',
+
+        '-mask-l-from-0',
+        '-mask-l-from-1.5',
+        '-mask-l-from-2',
+        '-mask-l-from-0%',
+        '-mask-l-from-2%',
+        '-mask-l-from-[0px]',
+        '-mask-l-from-[0%]',
+
+        '-mask-l-from-(--my-var)',
+        '-mask-l-from-(color:--my-var)',
+        '-mask-l-from-(length:--my-var)',
+
+        'mask-l-from-[-25%]',
+        'mask-l-from-[25%]/foo',
+        'mask-l-from-[-25%]/foo',
+        '-mask-l-from-[-25%]',
+        '-mask-l-from-[25%]/foo',
+        '-mask-l-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-l-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-to-0',
+        'mask-l-to-1.5',
+        'mask-l-to-2',
+        'mask-l-to-0%',
+        'mask-l-to-2%',
+        'mask-l-to-[0px]',
+        'mask-l-to-[0%]',
+
+        'mask-l-to-(--my-var)',
+        'mask-l-to-(color:--my-var)',
+        'mask-l-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-l-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-\\(--my-var\\), .mask-l-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-l-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-l-to',
+        'mask-l-to-2.8175',
+        'mask-l-to--1.5',
+        'mask-l-to--2',
+
+        'mask-l-to-2.5%',
+        'mask-l-to--5%',
+        'mask-l-to-unknown',
+        'mask-l-to-unknown%',
+
+        '-mask-l-to-0',
+        '-mask-l-to-1.5',
+        '-mask-l-to-2',
+        '-mask-l-to-0%',
+        '-mask-l-to-2%',
+        '-mask-l-to-[0px]',
+        '-mask-l-to-[0%]',
+
+        '-mask-l-to-(--my-var)',
+        '-mask-l-to-(color:--my-var)',
+        '-mask-l-to-(length:--my-var)',
+
+        'mask-l-to-[-25%]',
+        'mask-l-to-[25%]/foo',
+        'mask-l-to-[-25%]/foo',
+        '-mask-l-to-[-25%]',
+        '-mask-l-to-[25%]/foo',
+        '-mask-l-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-x-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-from-0',
+        'mask-x-from-1.5',
+        'mask-x-from-2',
+        'mask-x-from-0%',
+        'mask-x-from-2%',
+        'mask-x-from-[0px]',
+        'mask-x-from-[0%]',
+
+        'mask-x-from-(--my-var)',
+        'mask-x-from-(color:--my-var)',
+        'mask-x-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-x-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-color: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-\\(--my-var\\), .mask-x-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 0);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 1.5);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: calc(var(--spacing) * 2);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 2%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-from-position: 0px;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-from',
+        'mask-x-from-2.8175',
+        'mask-x-from--1.5',
+        'mask-x-from--2',
+
+        'mask-x-from-2.5%',
+        'mask-x-from--5%',
+        'mask-x-from-unknown',
+        'mask-x-from-unknown%',
+
+        '-mask-x-from-0',
+        '-mask-x-from-1.5',
+        '-mask-x-from-2',
+        '-mask-x-from-0%',
+        '-mask-x-from-2%',
+        '-mask-x-from-[0px]',
+        '-mask-x-from-[0%]',
+
+        '-mask-x-from-(--my-var)',
+        '-mask-x-from-(color:--my-var)',
+        '-mask-x-from-(length:--my-var)',
+
+        'mask-x-from-[-25%]',
+        'mask-x-from-[25%]/foo',
+        'mask-x-from-[-25%]/foo',
+        '-mask-x-from-[-25%]',
+        '-mask-x-from-[25%]/foo',
+        '-mask-x-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-x-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-to-0',
+        'mask-x-to-1.5',
+        'mask-x-to-2',
+        'mask-x-to-0%',
+        'mask-x-to-2%',
+        'mask-x-to-[0px]',
+        'mask-x-to-[0%]',
+
+        'mask-x-to-(--my-var)',
+        'mask-x-to-(color:--my-var)',
+        'mask-x-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-x-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-color: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-\\(--my-var\\), .mask-x-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: var(--my-var);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 0);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 1.5);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: calc(var(--spacing) * 2);
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 2%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0%;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-x-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-right: linear-gradient(to right, var(--tw-mask-right-from-color) var(--tw-mask-right-from-position), var(--tw-mask-right-to-color) var(--tw-mask-right-to-position));
+      --tw-mask-right-to-position: 0px;
+      --tw-mask-left: linear-gradient(to left, var(--tw-mask-left-from-color) var(--tw-mask-left-from-position), var(--tw-mask-left-to-color) var(--tw-mask-left-to-position));
+      --tw-mask-left-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-right-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-right-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-right-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-left-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-left-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-left-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-left-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-x-to',
+        'mask-x-to-2.8175',
+        'mask-x-to--1.5',
+        'mask-x-to--2',
+
+        'mask-x-to-2.5%',
+        'mask-x-to--5%',
+        'mask-x-to-unknown',
+        'mask-x-to-unknown%',
+
+        '-mask-x-to-0',
+        '-mask-x-to-1.5',
+        '-mask-x-to-2',
+        '-mask-x-to-0%',
+        '-mask-x-to-2%',
+        '-mask-x-to-[0px]',
+        '-mask-x-to-[0%]',
+
+        '-mask-x-to-(--my-var)',
+        '-mask-x-to-(color:--my-var)',
+        '-mask-x-to-(length:--my-var)',
+
+        'mask-x-to-[-25%]',
+        'mask-x-to-[25%]/foo',
+        'mask-x-to-[-25%]/foo',
+        '-mask-x-to-[-25%]',
+        '-mask-x-to-[25%]/foo',
+        '-mask-x-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-y-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-from-0',
+        'mask-y-from-1.5',
+        'mask-y-from-2',
+        'mask-y-from-0%',
+        'mask-y-from-2%',
+        'mask-y-from-[0px]',
+        'mask-y-from-[0%]',
+
+        'mask-y-from-(--my-var)',
+        'mask-y-from-(color:--my-var)',
+        'mask-y-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-y-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-color: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-\\(--my-var\\), .mask-y-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 1.5);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: calc(var(--spacing) * 2);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 2%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-from-position: 0px;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-from',
+        'mask-y-from-2.8175',
+        'mask-y-from--1.5',
+        'mask-y-from--2',
+
+        'mask-y-from-2.5%',
+        'mask-y-from--5%',
+        'mask-y-from-unknown',
+        'mask-y-from-unknown%',
+
+        '-mask-y-from-0',
+        '-mask-y-from-1.5',
+        '-mask-y-from-2',
+        '-mask-y-from-0%',
+        '-mask-y-from-2%',
+        '-mask-y-from-[0px]',
+        '-mask-y-from-[0%]',
+
+        '-mask-y-from-(--my-var)',
+        '-mask-y-from-(color:--my-var)',
+        '-mask-y-from-(length:--my-var)',
+
+        'mask-y-from-[-25%]',
+        'mask-y-from-[25%]/foo',
+        'mask-y-from-[-25%]/foo',
+        '-mask-y-from-[-25%]',
+        '-mask-y-from-[25%]/foo',
+        '-mask-y-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-y-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-to-0',
+        'mask-y-to-1.5',
+        'mask-y-to-2',
+        'mask-y-to-0%',
+        'mask-y-to-2%',
+        'mask-y-to-[0px]',
+        'mask-y-to-[0%]',
+
+        'mask-y-to-(--my-var)',
+        'mask-y-to-(color:--my-var)',
+        'mask-y-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-y-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-color: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-\\(--my-var\\), .mask-y-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: var(--my-var);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 0);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 1.5);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: calc(var(--spacing) * 2);
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 2%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0%;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-y-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top);
+      --tw-mask-top: linear-gradient(to top, var(--tw-mask-top-from-color) var(--tw-mask-top-from-position), var(--tw-mask-top-to-color) var(--tw-mask-top-to-position));
+      --tw-mask-top-to-position: 0px;
+      --tw-mask-bottom: linear-gradient(to bottom, var(--tw-mask-bottom-from-color) var(--tw-mask-bottom-from-position), var(--tw-mask-bottom-to-color) var(--tw-mask-bottom-to-position));
+      --tw-mask-bottom-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-left {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-right {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-bottom {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-top-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-top-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-top-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-top-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-bottom-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-bottom-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-bottom-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-bottom-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-y-to',
+        'mask-y-to-2.8175',
+        'mask-y-to--1.5',
+        'mask-y-to--2',
+
+        'mask-y-to-2.5%',
+        'mask-y-to--5%',
+        'mask-y-to-unknown',
+        'mask-y-to-unknown%',
+
+        '-mask-y-to-0',
+        '-mask-y-to-1.5',
+        '-mask-y-to-2',
+        '-mask-y-to-0%',
+        '-mask-y-to-2%',
+        '-mask-y-to-[0px]',
+        '-mask-y-to-[0%]',
+
+        '-mask-y-to-(--my-var)',
+        '-mask-y-to-(color:--my-var)',
+        '-mask-y-to-(length:--my-var)',
+
+        'mask-y-to-[-25%]',
+        'mask-y-to-[25%]/foo',
+        'mask-y-to-[-25%]/foo',
+        '-mask-y-to-[-25%]',
+        '-mask-y-to-[25%]/foo',
+        '-mask-y-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-linear', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      ['mask-linear-45', 'mask-linear-[3rad]', '-mask-linear-45'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".-mask-linear-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: calc(1deg * -45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: calc(1deg * 45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-\\[3rad\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)));
+      --tw-mask-linear-position: 171.887deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-linear-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-linear-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-linear-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-linear-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-linear-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-linear',
+      '-mask-linear',
+
+      'mask-linear--75',
+      'mask-linear-unknown',
+      'mask-linear--75/foo',
+      'mask-linear-unknown/foo',
+
+      'mask-linear-45/foo',
+      '-mask-linear-45/foo',
+
+      'mask-linear-[3rad]/foo',
+      '-mask-linear-[3rad]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-linear-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-from-0',
+        'mask-linear-from-1.5',
+        'mask-linear-from-2',
+        'mask-linear-from-0%',
+        'mask-linear-from-2%',
+        'mask-linear-from-[0px]',
+        'mask-linear-from-[0%]',
+
+        'mask-linear-from-(--my-var)',
+        'mask-linear-from-(color:--my-var)',
+        'mask-linear-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-linear-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-\\(--my-var\\), .mask-linear-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-linear-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-linear-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-linear-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-linear-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-linear-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-from',
+        'mask-linear-from-2.8175',
+        'mask-linear-from--1.5',
+        'mask-linear-from--2',
+
+        'mask-linear-from-2.5%',
+        'mask-linear-from--5%',
+        'mask-linear-from-unknown',
+        'mask-linear-from-unknown%',
+
+        '-mask-linear-from-0',
+        '-mask-linear-from-1.5',
+        '-mask-linear-from-2',
+        '-mask-linear-from-0%',
+        '-mask-linear-from-2%',
+        '-mask-linear-from-[0px]',
+        '-mask-linear-from-[0%]',
+
+        '-mask-linear-from-(--my-var)',
+        '-mask-linear-from-(color:--my-var)',
+        '-mask-linear-from-(length:--my-var)',
+
+        'mask-linear-from-[-25%]',
+        'mask-linear-from-[25%]/foo',
+        'mask-linear-from-[-25%]/foo',
+        '-mask-linear-from-[-25%]',
+        '-mask-linear-from-[25%]/foo',
+        '-mask-linear-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-linear-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-to-0',
+        'mask-linear-to-1.5',
+        'mask-linear-to-2',
+        'mask-linear-to-0%',
+        'mask-linear-to-2%',
+        'mask-linear-to-[0px]',
+        'mask-linear-to-[0%]',
+
+        'mask-linear-to-(--my-var)',
+        'mask-linear-to-(color:--my-var)',
+        'mask-linear-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-linear-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-\\(--my-var\\), .mask-linear-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-linear-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-linear-stops: var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position);
+      --tw-mask-linear: linear-gradient(var(--tw-mask-linear-stops));
+      --tw-mask-linear-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-linear-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-linear-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-linear-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-linear-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-linear-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-linear-to',
+        'mask-linear-to-2.8175',
+        'mask-linear-to--1.5',
+        'mask-linear-to--2',
+
+        'mask-linear-to-2.5%',
+        'mask-linear-to--5%',
+        'mask-linear-to-unknown',
+        'mask-linear-to-unknown%',
+
+        '-mask-linear-to-0',
+        '-mask-linear-to-1.5',
+        '-mask-linear-to-2',
+        '-mask-linear-to-0%',
+        '-mask-linear-to-2%',
+        '-mask-linear-to-[0px]',
+        '-mask-linear-to-[0%]',
+
+        '-mask-linear-to-(--my-var)',
+        '-mask-linear-to-(color:--my-var)',
+        '-mask-linear-to-(length:--my-var)',
+
+        'mask-linear-to-[-25%]',
+        'mask-linear-to-[25%]/foo',
+        'mask-linear-to-[-25%]/foo',
+        '-mask-linear-to-[-25%]',
+        '-mask-linear-to-[25%]/foo',
+        '-mask-linear-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-radial', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      [
+        'mask-circle',
+        'mask-ellipse',
+        'mask-radial-closest-side',
+        'mask-radial-farthest-side',
+        'mask-radial-closest-corner',
+        'mask-radial-farthest-corner',
+        'mask-radial-[25%_25%]',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-radial-\\[25\\%_25\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size)));
+      --tw-mask-radial-size: 25% 25%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .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;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-radial-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-radial-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-radial-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-radial-shape {
+      syntax: "*";
+      inherits: false;
+      initial-value: ellipse;
+    }
+
+    @property --tw-mask-radial-size {
+      syntax: "*";
+      inherits: false;
+      initial-value: farthest-corner;
+    }
+
+    @property --tw-mask-radial-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: center;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-radial',
+      'mask-radial-[25%_25%]/foo',
+      'mask-radial/foo',
+      '-mask-radial',
+      '-mask-radial-[25%_25%]',
+      '-mask-radial/foo',
+      '-mask-radial-[25%_25%]/foo',
+
+      'mask-radial-from-[-25%]',
+      'mask-radial-from-[25%]/foo',
+      'mask-radial-from-[-25%]/foo',
+      '-mask-radial-from-[-25%]',
+      '-mask-radial-from-[25%]/foo',
+      '-mask-radial-from-[-25%]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-radial-at', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-at-top',
+        'mask-radial-at-top-left',
+        'mask-radial-at-top-right',
+        'mask-radial-at-bottom',
+        'mask-radial-at-bottom-left',
+        'mask-radial-at-bottom-right',
+        'mask-radial-at-left',
+        'mask-radial-at-right',
+        'mask-radial-at-[25%]',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".mask-radial-at-\\[25\\%\\] {
+      --tw-mask-radial-position: 25%;
+    }
+
+    .mask-radial-at-bottom {
+      --tw-mask-radial-position: bottom;
+    }
+
+    .mask-radial-at-bottom-left {
+      --tw-mask-radial-position: bottom left;
+    }
+
+    .mask-radial-at-bottom-right {
+      --tw-mask-radial-position: bottom right;
+    }
+
+    .mask-radial-at-left {
+      --tw-mask-radial-position: left;
+    }
+
+    .mask-radial-at-right {
+      --tw-mask-radial-position: right;
+    }
+
+    .mask-radial-at-top {
+      --tw-mask-radial-position: top;
+    }
+
+    .mask-radial-at-top-left {
+      --tw-mask-radial-position: top left;
+    }
+
+    .mask-radial-at-top-right {
+      --tw-mask-radial-position: top right;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-radial-at',
+      'mask-radial-at/foo',
+      'mask-radial-at-25',
+      'mask-radial-at-unknown',
+      'mask-radial-at-[25%]/foo',
+      'mask-radial-at-top/foo',
+      'mask-radial-at-top-left/foo',
+      'mask-radial-at-top-right/foo',
+      'mask-radial-at-bottom/foo',
+      'mask-radial-at-bottom-left/foo',
+      'mask-radial-at-bottom-right/foo',
+      'mask-radial-at-left/foo',
+      'mask-radial-at-right/foo',
+
+      '-mask-radial-at',
+      '-mask-radial-at/foo',
+      '-mask-radial-at-25',
+      '-mask-radial-at-unknown',
+      '-mask-radial-at-[25%]',
+      '-mask-radial-at-[25%]/foo',
+
+      '-mask-radial-at-top',
+      '-mask-radial-at-top-left',
+      '-mask-radial-at-top-right',
+      '-mask-radial-at-bottom',
+      '-mask-radial-at-bottom-left',
+      '-mask-radial-at-bottom-right',
+      '-mask-radial-at-left',
+      '-mask-radial-at-right',
+
+      'mask-radial-at-[25%]/foo',
+      'mask-radial-at-[-25%]/foo',
+      '-mask-radial-at-[-25%]',
+      '-mask-radial-at-[25%]/foo',
+      '-mask-radial-at-[-25%]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-radial-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-from-0',
+        'mask-radial-from-1.5',
+        'mask-radial-from-2',
+        'mask-radial-from-0%',
+        'mask-radial-from-2%',
+        'mask-radial-from-[0px]',
+        'mask-radial-from-[0%]',
+
+        'mask-radial-from-(--my-var)',
+        'mask-radial-from-(color:--my-var)',
+        'mask-radial-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-radial-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-\\(--my-var\\), .mask-radial-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-radial-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-radial-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-radial-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-radial-shape {
+      syntax: "*";
+      inherits: false;
+      initial-value: ellipse;
+    }
+
+    @property --tw-mask-radial-size {
+      syntax: "*";
+      inherits: false;
+      initial-value: farthest-corner;
+    }
+
+    @property --tw-mask-radial-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: center;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-from',
+        'mask-radial-from-2.8175',
+        'mask-radial-from--1.5',
+        'mask-radial-from--2',
+
+        'mask-radial-from-2.5%',
+        'mask-radial-from--5%',
+        'mask-radial-from-unknown',
+        'mask-radial-from-unknown%',
+
+        '-mask-radial-from-0',
+        '-mask-radial-from-1.5',
+        '-mask-radial-from-2',
+        '-mask-radial-from-0%',
+        '-mask-radial-from-2%',
+        '-mask-radial-from-[0px]',
+        '-mask-radial-from-[0%]',
+
+        '-mask-radial-from-(--my-var)',
+        '-mask-radial-from-(color:--my-var)',
+        '-mask-radial-from-(length:--my-var)',
+
+        'mask-radial-from-[-25%]',
+        'mask-radial-from-[25%]/foo',
+        'mask-radial-from-[-25%]/foo',
+        '-mask-radial-from-[-25%]',
+        '-mask-radial-from-[25%]/foo',
+        '-mask-radial-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-radial-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-to-0',
+        'mask-radial-to-1.5',
+        'mask-radial-to-2',
+        'mask-radial-to-0%',
+        'mask-radial-to-2%',
+        'mask-radial-to-[0px]',
+        'mask-radial-to-[0%]',
+
+        'mask-radial-to-(--my-var)',
+        'mask-radial-to-(color:--my-var)',
+        'mask-radial-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-radial-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-\\(--my-var\\), .mask-radial-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-radial-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-radial-stops: var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position);
+      --tw-mask-radial: radial-gradient(var(--tw-mask-radial-stops));
+      --tw-mask-radial-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-radial-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-radial-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-radial-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }
+
+    @property --tw-mask-radial-shape {
+      syntax: "*";
+      inherits: false;
+      initial-value: ellipse;
+    }
+
+    @property --tw-mask-radial-size {
+      syntax: "*";
+      inherits: false;
+      initial-value: farthest-corner;
+    }
+
+    @property --tw-mask-radial-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: center;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-radial-to',
+        'mask-radial-to-2.8175',
+        'mask-radial-to--1.5',
+        'mask-radial-to--2',
+
+        'mask-radial-to-2.5%',
+        'mask-radial-to--5%',
+        'mask-radial-to-unknown',
+        'mask-radial-to-unknown%',
+
+        '-mask-radial-to-0',
+        '-mask-radial-to-1.5',
+        '-mask-radial-to-2',
+        '-mask-radial-to-0%',
+        '-mask-radial-to-2%',
+        '-mask-radial-to-[0px]',
+        '-mask-radial-to-[0%]',
+
+        '-mask-radial-to-(--my-var)',
+        '-mask-radial-to-(color:--my-var)',
+        '-mask-radial-to-(length:--my-var)',
+
+        'mask-radial-to-[-25%]',
+        'mask-radial-to-[25%]/foo',
+        'mask-radial-to-[-25%]/foo',
+        '-mask-radial-to-[-25%]',
+        '-mask-radial-to-[25%]/foo',
+        '-mask-radial-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-conic', async () => {
+  expect(
+    await compileCss(
+      css`
+        @tailwind utilities;
+      `,
+      ['mask-conic-45', 'mask-conic-[3rad]', '-mask-conic-45'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ".-mask-conic-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: calc(1deg * -45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-45 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: calc(1deg * 45);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-\\[3rad\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)));
+      --tw-mask-conic-position: 171.887deg;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-conic-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-conic-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-conic-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-conic-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-conic',
+      '-mask-conic',
+
+      'mask-conic--75',
+      'mask-conic-unknown',
+      'mask-conic--75/foo',
+      'mask-conic-unknown/foo',
+
+      'mask-conic-45/foo',
+      '-mask-conic-45/foo',
+
+      'mask-conic-[3rad]/foo',
+      '-mask-conic-[3rad]/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-conic-from', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-from-0',
+        'mask-conic-from-1.5',
+        'mask-conic-from-2',
+        'mask-conic-from-0%',
+        'mask-conic-from-2%',
+        'mask-conic-from-[0px]',
+        'mask-conic-from-[0%]',
+
+        'mask-conic-from-(--my-var)',
+        'mask-conic-from-(color:--my-var)',
+        'mask-conic-from-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-conic-from-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-\\(--my-var\\), .mask-conic-from-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-from-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-from-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-conic-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-conic-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-conic-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-conic-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-from',
+        'mask-conic-from-2.8175',
+        'mask-conic-from--1.5',
+        'mask-conic-from--2',
+
+        'mask-conic-from-2.5%',
+        'mask-conic-from--5%',
+        'mask-conic-from-unknown',
+        'mask-conic-from-unknown%',
+
+        '-mask-conic-from-0',
+        '-mask-conic-from-1.5',
+        '-mask-conic-from-2',
+        '-mask-conic-from-0%',
+        '-mask-conic-from-2%',
+        '-mask-conic-from-[0px]',
+        '-mask-conic-from-[0%]',
+
+        '-mask-conic-from-(--my-var)',
+        '-mask-conic-from-(color:--my-var)',
+        '-mask-conic-from-(length:--my-var)',
+
+        'mask-conic-from-[-25%]',
+        'mask-conic-from-[25%]/foo',
+        'mask-conic-from-[-25%]/foo',
+        '-mask-conic-from-[-25%]',
+        '-mask-conic-from-[25%]/foo',
+        '-mask-conic-from-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
+test('mask-conic-to', async () => {
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-to-0',
+        'mask-conic-to-1.5',
+        'mask-conic-to-2',
+        'mask-conic-to-0%',
+        'mask-conic-to-2%',
+        'mask-conic-to-[0px]',
+        'mask-conic-to-[0%]',
+
+        'mask-conic-to-(--my-var)',
+        'mask-conic-to-(color:--my-var)',
+        'mask-conic-to-(length:--my-var)',
+      ],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --spacing: .25rem;
+    }
+
+    .mask-conic-to-\\(color\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-color: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-\\(--my-var\\), .mask-conic-to-\\(length\\:--my-var\\) {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: var(--my-var);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-0 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: calc(var(--spacing) * 0);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-0\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-1\\.5 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: calc(var(--spacing) * 1.5);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-2 {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: calc(var(--spacing) * 2);
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-2\\% {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 2%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-\\[0\\%\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 0%;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    .mask-conic-to-\\[0px\\] {
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      -webkit-mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      mask-image: var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic);
+      --tw-mask-conic-stops: from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position);
+      --tw-mask-conic: conic-gradient(var(--tw-mask-conic-stops));
+      --tw-mask-conic-to-position: 0px;
+      -webkit-mask-composite: source-in;
+      -webkit-mask-composite: source-in;
+      mask-composite: intersect;
+    }
+
+    @property --tw-mask-linear {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-radial {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic {
+      syntax: "*";
+      inherits: false;
+      initial-value: linear-gradient(#fff, #fff);
+    }
+
+    @property --tw-mask-conic-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0deg;
+    }
+
+    @property --tw-mask-conic-from-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 0%;
+    }
+
+    @property --tw-mask-conic-to-position {
+      syntax: "*";
+      inherits: false;
+      initial-value: 100%;
+    }
+
+    @property --tw-mask-conic-from-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: black;
+    }
+
+    @property --tw-mask-conic-to-color {
+      syntax: "*";
+      inherits: false;
+      initial-value: transparent;
+    }"
+  `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --spacing: 0.25rem;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'mask-conic-to',
+        'mask-conic-to-2.8175',
+        'mask-conic-to--1.5',
+        'mask-conic-to--2',
+
+        'mask-conic-to-2.5%',
+        'mask-conic-to--5%',
+        'mask-conic-to-unknown',
+        'mask-conic-to-unknown%',
+
+        '-mask-conic-to-0',
+        '-mask-conic-to-1.5',
+        '-mask-conic-to-2',
+        '-mask-conic-to-0%',
+        '-mask-conic-to-2%',
+        '-mask-conic-to-[0px]',
+        '-mask-conic-to-[0%]',
+
+        '-mask-conic-to-(--my-var)',
+        '-mask-conic-to-(color:--my-var)',
+        '-mask-conic-to-(length:--my-var)',
+
+        'mask-conic-to-[-25%]',
+        'mask-conic-to-[25%]/foo',
+        'mask-conic-to-[-25%]/foo',
+        '-mask-conic-to-[-25%]',
+        '-mask-conic-to-[25%]/foo',
+        '-mask-conic-to-[-25%]/foo',
+      ],
+    ),
+  ).toEqual('')
+})
+
 test('box-decoration', async () => {
   expect(await run(['box-decoration-slice', 'box-decoration-clone'])).toMatchInlineSnapshot(`
     ".box-decoration-clone {
@@ -11651,6 +17030,134 @@ test('bg-origin', async () => {
   ).toEqual('')
 })
 
+test('mask-clip', async () => {
+  expect(
+    await run([
+      'mask-clip-border',
+      'mask-clip-padding',
+      'mask-clip-content',
+      'mask-clip-fill',
+      'mask-clip-stroke',
+      'mask-clip-view',
+      'mask-no-clip',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".mask-clip-border {
+      -webkit-mask-clip: border-box;
+      mask-clip: border-box;
+    }
+
+    .mask-clip-content {
+      -webkit-mask-clip: content-box;
+      mask-clip: content-box;
+    }
+
+    .mask-clip-fill {
+      -webkit-mask-clip: fill-box;
+      mask-clip: fill-box;
+    }
+
+    .mask-clip-padding {
+      -webkit-mask-clip: padding-box;
+      mask-clip: padding-box;
+    }
+
+    .mask-clip-stroke {
+      -webkit-mask-clip: stroke-box;
+      mask-clip: stroke-box;
+    }
+
+    .mask-clip-view {
+      -webkit-mask-clip: view-box;
+      mask-clip: view-box;
+    }
+
+    .mask-no-clip {
+      -webkit-mask-clip: no-clip;
+      mask-clip: no-clip;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-clip',
+      '-mask-clip-border',
+      '-mask-clip-padding',
+      '-mask-clip-content',
+      '-mask-clip-fill',
+      '-mask-clip-stroke',
+      '-mask-clip-view',
+      '-mask-no-clip',
+      'mask-clip-border/foo',
+      'mask-clip-padding/foo',
+      'mask-clip-content/foo',
+      'mask-clip-fill/foo',
+      'mask-clip-stroke/foo',
+      'mask-clip-view/foo',
+      'mask-no-clip/foo',
+    ]),
+  ).toEqual('')
+})
+
+test('mask-origin', async () => {
+  expect(
+    await run([
+      'mask-origin-border',
+      'mask-origin-padding',
+      'mask-origin-content',
+      'mask-origin-fill',
+      'mask-origin-stroke',
+      'mask-origin-view',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".mask-origin-border {
+      -webkit-mask-origin: border-box;
+      mask-origin: border-box;
+    }
+
+    .mask-origin-content {
+      -webkit-mask-origin: content-box;
+      mask-origin: content-box;
+    }
+
+    .mask-origin-fill {
+      -webkit-mask-origin: fill-box;
+      mask-origin: fill-box;
+    }
+
+    .mask-origin-padding {
+      -webkit-mask-origin: padding-box;
+      mask-origin: padding-box;
+    }
+
+    .mask-origin-stroke {
+      -webkit-mask-origin: stroke-box;
+      mask-origin: stroke-box;
+    }
+
+    .mask-origin-view {
+      -webkit-mask-origin: view-box;
+      mask-origin: view-box;
+    }"
+  `)
+  expect(
+    await run([
+      'mask-origin',
+      '-mask-origin-border',
+      '-mask-origin-padding',
+      '-mask-origin-content',
+      '-mask-origin-fill',
+      '-mask-origin-stroke',
+      '-mask-origin-view',
+      'mask-origin-border/foo',
+      'mask-origin-padding/foo',
+      'mask-origin-content/foo',
+      'mask-origin-fill/foo',
+      'mask-origin-stroke/foo',
+      'mask-origin-view/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('bg-blend', async () => {
   expect(
     await run([
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 025179a1297a..2178f5d80cc3 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -13,6 +13,7 @@ import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidat
 import type { DesignSystem } from './design-system'
 import {
   enableBaselineLast,
+  enableMaskUtilities,
   enableSafeAlignment,
   enableTextShadows,
   enableWrapAnywhere,
@@ -375,7 +376,7 @@ export function createUtilities(theme: Theme) {
     defaultValue?: string | null
     handleBareValue?: (value: NamedUtilityValue) => string | null
     handleNegativeBareValue?: (value: NamedUtilityValue) => string | null
-    handle: (value: string) => AstNode[] | undefined
+    handle: (value: string, dataType: string | null) => AstNode[] | undefined
   }
 
   /**
@@ -386,6 +387,7 @@ export function createUtilities(theme: Theme) {
     function handleFunctionalUtility({ negative }: { negative: boolean }) {
       return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
         let value: string | null = null
+        let dataType: string | null = null
 
         if (!candidate.value) {
           if (candidate.modifier) return
@@ -401,6 +403,7 @@ export function createUtilities(theme: Theme) {
         } else if (candidate.value.kind === 'arbitrary') {
           if (candidate.modifier) return
           value = candidate.value.value
+          dataType = candidate.value.dataType
         } else {
           value = theme.resolve(
             candidate.value.fraction ?? candidate.value.value,
@@ -420,7 +423,7 @@ export function createUtilities(theme: Theme) {
           if (value === null && negative && desc.handleNegativeBareValue) {
             value = desc.handleNegativeBareValue(candidate.value)
             if (!value?.includes('/') && candidate.modifier) return
-            if (value !== null) return desc.handle(value)
+            if (value !== null) return desc.handle(value, null)
           }
 
           if (value === null && desc.handleBareValue) {
@@ -433,7 +436,7 @@ export function createUtilities(theme: Theme) {
         if (value === null) return
 
         // Negate the value if the candidate has a negative prefix.
-        return desc.handle(negative ? `calc(${value} * -1)` : value)
+        return desc.handle(negative ? `calc(${value} * -1)` : value, dataType)
       }
     }
 
@@ -2819,6 +2822,689 @@ export function createUtilities(theme: Theme) {
     position: (value) => [gradientStopProperties(), decl('--tw-gradient-to-position', value)],
   })
 
+  if (enableMaskUtilities) {
+    /**
+     * @css `mask-image`
+     */
+
+    staticUtility('mask-none', [['mask-image', 'none']])
+
+    utilities.functional('mask', (candidate) => {
+      if (!candidate.value) return
+      if (candidate.modifier) return
+      if (candidate.value.kind !== 'arbitrary') return
+
+      // Arbitrary values
+      let value: string | null = candidate.value.value
+      let type =
+        candidate.value.dataType ??
+        inferDataType(value, ['image', 'percentage', 'position', 'bg-size', 'length', 'url'])
+
+      switch (type) {
+        case 'percentage':
+        case 'position': {
+          if (candidate.modifier) return
+          return [decl('mask-position', value)]
+        }
+        case 'bg-size':
+        case 'length':
+        case 'size': {
+          return [decl('mask-size', value)]
+        }
+        case 'image':
+        case 'url':
+        default: {
+          return [decl('mask-image', value)]
+        }
+      }
+    })
+
+    /**
+     * @css `mask-composite`
+     */
+
+    staticUtility('mask-add', [['mask-composite', 'add']])
+    staticUtility('mask-subtract', [['mask-composite', 'subtract']])
+    staticUtility('mask-intersect', [['mask-composite', 'intersect']])
+    staticUtility('mask-exclude', [['mask-composite', 'exclude']])
+
+    /**
+     * @css `mask-mode`
+     *
+     * Sets the "mode" of the mask given by mask-image
+     */
+
+    staticUtility('mask-alpha', [['mask-mode', 'alpha']])
+    staticUtility('mask-luminance', [['mask-mode', 'luminance']])
+    staticUtility('mask-match', [['mask-mode', 'match-source']])
+
+    /**
+     * @css `mask-type`
+     *
+     * Sets the "mode" of the current `<mask>` element
+     * Is overridden by `mask-mode` if used
+     */
+    staticUtility('mask-type-alpha', [['mask-type', 'alpha']])
+    staticUtility('mask-type-luminance', [['mask-type', 'luminance']])
+
+    /**
+     * @css `mask-size`
+     */
+
+    staticUtility('mask-auto', [['mask-size', 'auto']])
+    staticUtility('mask-cover', [['mask-size', 'cover']])
+    staticUtility('mask-contain', [['mask-size', 'contain']])
+    functionalUtility('mask-size', {
+      handle(value) {
+        if (!value) return
+        return [decl('mask-size', value)]
+      },
+    })
+
+    /**
+     * @css `mask-position`
+     */
+
+    staticUtility('mask-top', [['mask-position', 'top']])
+    staticUtility('mask-top-left', [['mask-position', 'left top']])
+    staticUtility('mask-top-right', [['mask-position', 'right top']])
+    staticUtility('mask-bottom', [['mask-position', 'bottom']])
+    staticUtility('mask-bottom-left', [['mask-position', 'left bottom']])
+    staticUtility('mask-bottom-right', [['mask-position', 'right bottom']])
+    staticUtility('mask-left', [['mask-position', 'left']])
+    staticUtility('mask-right', [['mask-position', 'right']])
+    staticUtility('mask-center', [['mask-position', 'center']])
+    functionalUtility('mask-position', {
+      handle(value) {
+        if (!value) return
+        return [decl('mask-position', value)]
+      },
+    })
+
+    /**
+     * @css `mask-repeat`
+     */
+
+    staticUtility('mask-repeat', [['mask-repeat', 'repeat']])
+    staticUtility('mask-no-repeat', [['mask-repeat', 'no-repeat']])
+    staticUtility('mask-repeat-x', [['mask-repeat', 'repeat-x']])
+    staticUtility('mask-repeat-y', [['mask-repeat', 'repeat-y']])
+    staticUtility('mask-repeat-round', [['mask-repeat', 'round']])
+    staticUtility('mask-repeat-space', [['mask-repeat', 'space']])
+
+    /**
+     * @css `mask-clip`
+     */
+
+    staticUtility('mask-clip-border', [['mask-clip', 'border-box']])
+    staticUtility('mask-clip-padding', [['mask-clip', 'padding-box']])
+    staticUtility('mask-clip-content', [['mask-clip', 'content-box']])
+    staticUtility('mask-clip-fill', [['mask-clip', 'fill-box']])
+    staticUtility('mask-clip-stroke', [['mask-clip', 'stroke-box']])
+    staticUtility('mask-clip-view', [['mask-clip', 'view-box']])
+    staticUtility('mask-no-clip', [['mask-clip', 'no-clip']])
+
+    /**
+     * @css `mask-origin`
+     */
+
+    staticUtility('mask-origin-border', [['mask-origin', 'border-box']])
+    staticUtility('mask-origin-padding', [['mask-origin', 'padding-box']])
+    staticUtility('mask-origin-content', [['mask-origin', 'content-box']])
+    staticUtility('mask-origin-fill', [['mask-origin', 'fill-box']])
+    staticUtility('mask-origin-stroke', [['mask-origin', 'stroke-box']])
+    staticUtility('mask-origin-view', [['mask-origin', 'view-box']])
+
+    /**
+     * @css `mask-image` gradients
+     */
+
+    let maskPropertiesGradient = () =>
+      atRoot([
+        property('--tw-mask-linear', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-radial', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-conic', 'linear-gradient(#fff, #fff)'),
+      ])
+
+    type MaskStopDescription = {
+      color: (value: string) => AstNode[] | undefined
+      position: (value: string) => AstNode[] | undefined
+    }
+
+    function maskStopUtility(classRoot: string, desc: MaskStopDescription) {
+      utilities.functional(classRoot, (candidate) => {
+        if (!candidate.value) return
+
+        // Arbitrary values
+        if (candidate.value.kind === 'arbitrary') {
+          let value: string | null = candidate.value.value
+          let type =
+            candidate.value.dataType ?? inferDataType(value, ['length', 'percentage', 'color'])
+
+          switch (type) {
+            case 'color': {
+              value = asColor(value, candidate.modifier, theme)
+              if (value === null) return
+
+              return desc.color(value)
+            }
+            case 'percentage': {
+              if (candidate.modifier) return
+              if (!isPositiveInteger(value.slice(0, -1))) return
+
+              return desc.position(value)
+            }
+            default: {
+              if (candidate.modifier) return
+
+              return desc.position(value)
+            }
+          }
+        }
+
+        // Known values: Color Stops
+        {
+          let value = resolveThemeColor(candidate, theme, ['--background-color', '--color'])
+          if (value) {
+            return desc.color(value)
+          }
+        }
+
+        // Known values: Positions
+        {
+          if (candidate.modifier) return
+
+          let type = inferDataType(candidate.value.value, ['number', 'percentage'])
+          if (!type) return
+
+          switch (type) {
+            case 'number': {
+              let multiplier = theme.resolve(null, ['--spacing'])
+              if (!multiplier) return
+              if (!isValidSpacingMultiplier(candidate.value.value)) return
+
+              return desc.position(`calc(${multiplier} * ${candidate.value.value})`)
+            }
+
+            case 'percentage': {
+              if (!isPositiveInteger(candidate.value.value.slice(0, -1))) return
+              return desc.position(candidate.value.value)
+            }
+
+            default: {
+              return
+            }
+          }
+        }
+      })
+
+      suggest(classRoot, () => [
+        {
+          values: ['current', 'inherit', 'transparent'],
+          valueThemeKeys: ['--background-color', '--color'],
+          modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        },
+        {
+          values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
+          valueThemeKeys: ['--gradient-color-stop-positions'],
+        },
+      ])
+
+      suggest(classRoot, () => [
+        // Percentages
+        {
+          values: Array.from({ length: 21 }, (_, index) => `${index * 5}%`),
+        },
+
+        // Spacing Scale
+        {
+          values: theme.get(['--spacing']) ? DEFAULT_SPACING_SUGGESTIONS : [],
+        },
+
+        // Colors
+        {
+          values: ['current', 'inherit', 'transparent'],
+          valueThemeKeys: ['--background-color', '--color'],
+          modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`),
+        },
+      ])
+    }
+
+    /**
+     * Edge masks
+     */
+
+    let maskPropertiesEdge = () =>
+      atRoot([
+        property('--tw-mask-left', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-right', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-bottom', 'linear-gradient(#fff, #fff)'),
+        property('--tw-mask-top', 'linear-gradient(#fff, #fff)'),
+      ])
+
+    type MaskEdge = 'top' | 'right' | 'bottom' | 'left'
+    type MaskStop = 'from' | 'to'
+
+    function maskEdgeUtility(name: string, stop: MaskStop, edges: Record<MaskEdge, boolean>) {
+      maskStopUtility(name, {
+        color(value) {
+          let nodes: AstNode[] = [
+            // Common @property declarations
+            maskPropertiesGradient(),
+            maskPropertiesEdge(),
+
+            // Common properties to all edge utilities
+            decl(
+              'mask-image',
+              'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)',
+            ),
+            decl('mask-composite', 'intersect'),
+            decl(
+              '--tw-mask-linear',
+              'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
+            ),
+          ]
+
+          for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
+            if (!edges[edge]) continue
+
+            nodes.push(
+              decl(
+                `--tw-mask-${edge}`,
+                `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
+              ),
+            )
+
+            nodes.push(
+              atRoot([
+                property(`--tw-mask-${edge}-from-position`, '0%'),
+                property(`--tw-mask-${edge}-to-position`, '100%'),
+                property(`--tw-mask-${edge}-from-color`, 'black'),
+                property(`--tw-mask-${edge}-to-color`, 'transparent'),
+              ]),
+            )
+
+            nodes.push(decl(`--tw-mask-${edge}-${stop}-color`, value))
+          }
+
+          return nodes
+        },
+        position(value) {
+          let nodes: AstNode[] = [
+            // Common @property declarations
+            maskPropertiesGradient(),
+            maskPropertiesEdge(),
+
+            // Common properties to all edge utilities
+            decl(
+              'mask-image',
+              'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)',
+            ),
+            decl('mask-composite', 'intersect'),
+            decl(
+              '--tw-mask-linear',
+              'var(--tw-mask-left), var(--tw-mask-right), var(--tw-mask-bottom), var(--tw-mask-top)',
+            ),
+          ]
+
+          for (let edge of ['top', 'right', 'bottom', 'left'] as const) {
+            if (!edges[edge]) continue
+
+            nodes.push(
+              decl(
+                `--tw-mask-${edge}`,
+                `linear-gradient(to ${edge}, var(--tw-mask-${edge}-from-color) var(--tw-mask-${edge}-from-position), var(--tw-mask-${edge}-to-color) var(--tw-mask-${edge}-to-position))`,
+              ),
+            )
+
+            nodes.push(
+              atRoot([
+                property(`--tw-mask-${edge}-from-position`, '0%'),
+                property(`--tw-mask-${edge}-to-position`, '100%'),
+                property(`--tw-mask-${edge}-from-color`, 'black'),
+                property(`--tw-mask-${edge}-to-color`, 'transparent'),
+              ]),
+            )
+
+            nodes.push(decl(`--tw-mask-${edge}-${stop}-position`, value))
+          }
+
+          return nodes
+        },
+      })
+    }
+
+    maskEdgeUtility('mask-x-from', 'from', { top: false, right: true, bottom: false, left: true })
+    maskEdgeUtility('mask-x-to', 'to', { top: false, right: true, bottom: false, left: true })
+    maskEdgeUtility('mask-y-from', 'from', { top: true, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-y-to', 'to', { top: true, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-t-from', 'from', { top: true, right: false, bottom: false, left: false })
+    maskEdgeUtility('mask-t-to', 'to', { top: true, right: false, bottom: false, left: false })
+    maskEdgeUtility('mask-r-from', 'from', { top: false, right: true, bottom: false, left: false })
+    maskEdgeUtility('mask-r-to', 'to', { top: false, right: true, bottom: false, left: false })
+    maskEdgeUtility('mask-b-from', 'from', { top: false, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-b-to', 'to', { top: false, right: false, bottom: true, left: false })
+    maskEdgeUtility('mask-l-from', 'from', { top: false, right: false, bottom: false, left: true })
+    maskEdgeUtility('mask-l-to', 'to', { top: false, right: false, bottom: false, left: true })
+
+    /**
+     *  Linear Masks
+     */
+
+    let maskPropertiesLinear = () =>
+      atRoot([
+        property('--tw-mask-linear-position', '0deg'),
+        property('--tw-mask-linear-from-position', '0%'),
+        property('--tw-mask-linear-to-position', '100%'),
+        property('--tw-mask-linear-from-color', 'black'),
+        property('--tw-mask-linear-to-color', 'transparent'),
+      ])
+
+    functionalUtility('mask-linear', {
+      defaultValue: null,
+      supportsNegative: true,
+      supportsFractions: false,
+      handleBareValue(value) {
+        if (!isPositiveInteger(value.value)) return null
+        return `calc(1deg * ${value.value})`
+      },
+      handleNegativeBareValue(value) {
+        if (!isPositiveInteger(value.value)) return null
+        return `calc(1deg * -${value.value})`
+      },
+      handle: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear',
+          `linear-gradient(var(--tw-mask-linear-stops, var(--tw-mask-linear-position)))`,
+        ),
+        decl('--tw-mask-linear-position', value),
+      ],
+    })
+
+    suggest('mask-linear', () => [
+      {
+        supportsNegative: true,
+        values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
+      },
+    ])
+
+    maskStopUtility('mask-linear-from', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-from-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-from-position', value),
+      ],
+    })
+
+    maskStopUtility('mask-linear-to', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-to-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesLinear(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-linear-stops',
+          'var(--tw-mask-linear-position), var(--tw-mask-linear-from-color) var(--tw-mask-linear-from-position), var(--tw-mask-linear-to-color) var(--tw-mask-linear-to-position)',
+        ),
+        decl('--tw-mask-linear', 'linear-gradient(var(--tw-mask-linear-stops))'),
+        decl('--tw-mask-linear-to-position', value),
+      ],
+    })
+
+    /**
+     * Radial masks
+     */
+
+    let maskPropertiesRadial = () =>
+      atRoot([
+        property('--tw-mask-radial-from-position', '0%'),
+        property('--tw-mask-radial-to-position', '100%'),
+        property('--tw-mask-radial-from-color', 'black'),
+        property('--tw-mask-radial-to-color', 'transparent'),
+        property('--tw-mask-radial-shape', 'ellipse'),
+        property('--tw-mask-radial-size', 'farthest-corner'),
+        property('--tw-mask-radial-position', 'center'),
+      ])
+
+    staticUtility('mask-circle', [['--tw-mask-radial-shape', 'circle']])
+    staticUtility('mask-ellipse', [['--tw-mask-radial-shape', 'ellipse']])
+    staticUtility('mask-radial-closest-side', [['--tw-mask-radial-size', 'closest-side']])
+    staticUtility('mask-radial-farthest-side', [['--tw-mask-radial-size', 'farthest-side']])
+    staticUtility('mask-radial-closest-corner', [['--tw-mask-radial-size', 'closest-corner']])
+    staticUtility('mask-radial-farthest-corner', [['--tw-mask-radial-size', 'farthest-corner']])
+    staticUtility('mask-radial-at-top', [['--tw-mask-radial-position', 'top']])
+    staticUtility('mask-radial-at-top-left', [['--tw-mask-radial-position', 'top left']])
+    staticUtility('mask-radial-at-top-right', [['--tw-mask-radial-position', 'top right']])
+    staticUtility('mask-radial-at-bottom', [['--tw-mask-radial-position', 'bottom']])
+    staticUtility('mask-radial-at-bottom-left', [['--tw-mask-radial-position', 'bottom left']])
+    staticUtility('mask-radial-at-bottom-right', [['--tw-mask-radial-position', 'bottom right']])
+    staticUtility('mask-radial-at-left', [['--tw-mask-radial-position', 'left']])
+    staticUtility('mask-radial-at-right', [['--tw-mask-radial-position', 'right']])
+    staticUtility('mask-radial-at-center', [['--tw-mask-radial-position', 'center']])
+    functionalUtility('mask-radial-at', {
+      defaultValue: null,
+      supportsNegative: false,
+      supportsFractions: false,
+      handle: (value) => [decl('--tw-mask-radial-position', value)],
+    })
+
+    /*
+      This can be used to set just the size in conjunction with `mask-radial-from-*` et al,
+      or can set the whole gradient if it's the only utility you use.
+
+      For example:
+      `mask-radial-[40px_80px] mask-radial-from-50%`
+      `mask-radial-[96px_at_top,black_40%,transparent_80%,black_90%]`
+
+      This will produce nonsense though and break, which is fine:
+      `mask-radial-[96px_at_top,black_40%,transparent_80%,black_90%]  mask-radial-from-50%`
+    */
+    functionalUtility('mask-radial', {
+      defaultValue: null,
+      supportsNegative: false,
+      supportsFractions: false,
+      handle: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial',
+          'radial-gradient(var(--tw-mask-radial-stops, var(--tw-mask-radial-size)))',
+        ),
+        decl('--tw-mask-radial-size', value),
+      ],
+    })
+
+    maskStopUtility('mask-radial-from', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-from-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-from-position', value),
+      ],
+    })
+
+    maskStopUtility('mask-radial-to', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-to-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesRadial(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-radial-stops',
+          'var(--tw-mask-radial-shape) var(--tw-mask-radial-size) at var(--tw-mask-radial-position), var(--tw-mask-radial-from-color) var(--tw-mask-radial-from-position), var(--tw-mask-radial-to-color) var(--tw-mask-radial-to-position)',
+        ),
+        decl('--tw-mask-radial', 'radial-gradient(var(--tw-mask-radial-stops))'),
+        decl('--tw-mask-radial-to-position', value),
+      ],
+    })
+
+    /**
+     * Conic masks
+     */
+
+    let maskPropertiesConic = () =>
+      atRoot([
+        property('--tw-mask-conic-position', '0deg'),
+        property('--tw-mask-conic-from-position', '0%'),
+        property('--tw-mask-conic-to-position', '100%'),
+        property('--tw-mask-conic-from-color', 'black'),
+        property('--tw-mask-conic-to-color', 'transparent'),
+      ])
+
+    functionalUtility('mask-conic', {
+      defaultValue: null,
+      supportsNegative: true,
+      supportsFractions: false,
+      handleBareValue(value) {
+        if (!isPositiveInteger(value.value)) return null
+        return `calc(1deg * ${value.value})`
+      },
+      handleNegativeBareValue(value) {
+        if (!isPositiveInteger(value.value)) return null
+        return `calc(1deg * -${value.value})`
+      },
+      handle: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic',
+          'conic-gradient(var(--tw-mask-conic-stops, var(--tw-mask-conic-position)))',
+        ),
+        decl('--tw-mask-conic-position', value),
+      ],
+    })
+
+    suggest('mask-conic', () => [
+      {
+        supportsNegative: true,
+        values: ['0', '1', '2', '3', '6', '12', '45', '90', '180'],
+      },
+    ])
+
+    maskStopUtility('mask-conic-from', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-from-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-from-position', value),
+      ],
+    })
+
+    maskStopUtility('mask-conic-to', {
+      color: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-to-color', value),
+      ],
+      position: (value) => [
+        maskPropertiesGradient(),
+        maskPropertiesConic(),
+        decl('mask-image', 'var(--tw-mask-linear), var(--tw-mask-radial), var(--tw-mask-conic)'),
+        decl('mask-composite', 'intersect'),
+        decl(
+          '--tw-mask-conic-stops',
+          'from var(--tw-mask-conic-position), var(--tw-mask-conic-from-color) var(--tw-mask-conic-from-position), var(--tw-mask-conic-to-color) var(--tw-mask-conic-to-position)',
+        ),
+        decl('--tw-mask-conic', 'conic-gradient(var(--tw-mask-conic-stops))'),
+        decl('--tw-mask-conic-to-position', value),
+      ],
+    })
+  }
+
   /**
    * @css `box-decoration-break`
    */
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 7fbe0e58cc86..ed1a3e9b82cc 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -173,6 +173,1305 @@ for (let [classes, expected] of [
   })
 }
 
+/**
+ * Edge mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from)
+  //
+  [
+    'mask-x-from-20%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-t-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-r-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-b-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-l-from-20%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Single values (to)
+  //
+  [
+    'mask-x-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-t-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-r-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-b-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-l-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple values (from + to)
+  //
+  [
+    'mask-x-from-20% mask-x-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-from-20% mask-y-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-t-from-20% mask-t-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-r-from-20% mask-r-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-b-from-20% mask-b-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-l-from-20% mask-l-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple edges
+  //
+  [
+    'mask-t-from-10% mask-t-to-20% mask-r-from-30% mask-r-to-40% mask-b-from-50% mask-b-to-60% mask-l-from-70% mask-l-to-80%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
+      'linear-gradient(rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 60%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-x-from-10% mask-x-to-20% mask-y-from-30% mask-y-to-40%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 20%)',
+      'linear-gradient(rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 40%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple edges
+  // TRBL takes precedence over XY
+  //
+  [
+    'mask-x-from-20% mask-x-to-80% mask-l-from-30% mask-r-to-70%',
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-y-from-20% mask-y-to-80% mask-t-from-30% mask-b-to-70%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 70%)',
+      'linear-gradient(to top, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+]) {
+  test(`mask edges, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Linear mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-linear-45 mask-linear-from-20%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+    ],
+  ],
+  [
+    'mask-linear-45 mask-linear-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+    ],
+  ],
+
+  //
+  // Multiple values
+  //
+  [
+    'mask-linear-45 mask-linear-from-20% mask-linear-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask linear, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Radial mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-radial-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Multiple values (from, to)
+  //
+  [
+    'mask-radial-from-20% mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Shapes
+  //
+  [
+    'mask-circle mask-radial-from-20% mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(circle, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+  [
+    'mask-ellipse mask-radial-from-20% mask-radial-to-80%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Positions
+  //
+  [
+    'mask-radial-at-top-left mask-radial-from-20% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'radial-gradient(at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'radial-gradient(at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+    ],
+  ],
+  [
+    'mask-circle mask-radial-at-top-left mask-radial-from-20% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'radial-gradient(circle at 0% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'radial-gradient(circle at left top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+    ],
+  ],
+
+  //
+  // Sizes
+  //
+  [
+    'mask-radial-[100%_100%] mask-radial-from-20%',
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(100% 100%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ],
+
+  //
+  // Complicated radial gradient
+  //
+  [
+    'mask-radial-[25%_150%] mask-radial-at-top mask-ellipse mask-radial-from-20% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'radial-gradient(25% 150% at 50% 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'radial-gradient(25% 150% at center top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask radial, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Conic mask utilities
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-conic-45 mask-conic-from-20%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+    ],
+  ],
+  [
+    'mask-conic-45 mask-conic-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+    ],
+  ],
+
+  //
+  // Multiple values
+  //
+  [
+    'mask-conic-45 mask-conic-from-20% mask-conic-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Radial
+        'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%)',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask conic, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+/**
+ * Multiple masks
+ */
+for (let [classes, expected] of [
+  //
+  // Single values (from, to)
+  //
+  [
+    'mask-conic-45 mask-conic-from-20% mask-linear-30 mask-linear-to-70% mask-circle mask-radial-from-40% mask-radial-to-80%',
+    [
+      // WebKit / Firefox
+      [
+        // Linear
+        'linear-gradient(30deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+        // Radial
+        'radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'conic-gradient(from 45deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+
+      // Chromium
+      [
+        // Linear
+        'linear-gradient(calc(30deg), rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%)',
+        // Radial
+        'radial-gradient(circle, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 80%)',
+        // Conic
+        'conic-gradient(from calc(45deg), rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%)',
+      ].join(', '),
+    ],
+  ],
+]) {
+  test(`mask multiple, "${classes}"`, async ({ page }) => {
+    let { getPropertyValue } = await render(
+      page,
+      html`<div id="x" class="${classes}">Hello world</div>`,
+    )
+
+    if (Array.isArray(expected)) {
+      expect(expected).toContain(await getPropertyValue('#x', 'mask-image'))
+    } else {
+      expect(await getPropertyValue('#x', 'mask-image')).toEqual(expected)
+    }
+  })
+}
+
+test('mask edges can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html` <div id="x" class="mask-x-from-25% hover:mask-x-to-75%">Hello world</div> `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+})
+
+test('mask edge colors can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-x-from-25% hover:mask-x-from-transparent hover:mask-x-to-black">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(to right, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(to left, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      'linear-gradient(to right, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+})
+
+test('linear mask direction can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-linear-15 mask-linear-from-25% hover:mask-linear-45">Hello world</div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('linear mask position can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-linear-15 mask-linear-from-25% hover:mask-linear-to-75%">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('linear mask colors can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div
+        id="x"
+        class="mask-linear-15 mask-linear-from-25% hover:mask-linear-from-transparent hover:mask-linear-to-black"
+      >
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('radial mask size can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-[125%_25%]">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(125% 25%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+})
+
+test('radial mask position can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-to-75%">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+})
+
+test('radial mask color can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div
+        id="x"
+        class="mask-radial-[50%_50%] mask-radial-from-25% hover:mask-radial-from-transparent hover:mask-radial-to-black"
+      >
+        Hello world
+      </div>
+    `,
+  )
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(50% 50%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'mask-image')).toEqual(
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'radial-gradient(50% 50%, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+      // Conic
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+    ].join(', '),
+  )
+})
+
+test('conic mask direction can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-conic-15 mask-conic-from-25% hover:mask-conic-45">Hello world</div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from 45deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from calc(45deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('conic mask position can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div id="x" class="mask-conic-15 mask-conic-from-25% hover:mask-conic-to-75%">
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
+test('conic mask color can be changed on hover', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`
+      <div
+        id="x"
+        class="mask-conic-15 mask-conic-from-25% hover:mask-conic-from-transparent hover:mask-conic-to-black"
+      >
+        Hello world
+      </div>
+    `,
+  )
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from 15deg, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+
+  await page.locator('#x').hover()
+
+  expect([
+    // WebKit / Firefox
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from 15deg, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+    ].join(', '),
+
+    // Chromium
+    [
+      // Linear
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Radial
+      'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))',
+      // Conic
+      'conic-gradient(from calc(15deg), rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 100%)',
+    ].join(', '),
+  ]).toContain(await getPropertyValue('#x', 'mask-image'))
+})
+
 test("::backdrop can receive a border with just the 'border' utility", async ({ page }) => {
   let { getPropertyValue } = await render(
     page,
@@ -814,6 +2113,8 @@ async function render(page: Page, content: string, extraCss: string = '') {
         --color-red: rgb(255, 0, 0);
         --color-green: rgb(0, 255, 0);
         --color-blue: rgb(0, 0, 255);
+        --color-black: black;
+        --color-transparent: transparent;
       }
     }
     @layer base {