diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52cc9042cc3c..0c7eed39ce31 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Support opacity values in increments of `0.25` by default ([#14980](https://github.com/tailwindlabs/tailwindcss/pull/14980))
+- Support specifying the color interpolation method for gradients via modifier ([#14984](https://github.com/tailwindlabs/tailwindcss/pull/14984))
 
 ## [4.0.0-alpha.33] - 2024-11-11
 
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index d96b027f3425..2d4cdf5c5bdb 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2,6 +2,222 @@
 
 exports[`getClassList 1`] = `
 [
+  "-bg-conic-0",
+  "-bg-conic-0/oklab",
+  "-bg-conic-0/oklch",
+  "-bg-conic-0/srgb",
+  "-bg-conic-0/hsl",
+  "-bg-conic-0/longer",
+  "-bg-conic-0/shorter",
+  "-bg-conic-0/increasing",
+  "-bg-conic-0/decreasing",
+  "-bg-conic-120",
+  "-bg-conic-120/oklab",
+  "-bg-conic-120/oklch",
+  "-bg-conic-120/srgb",
+  "-bg-conic-120/hsl",
+  "-bg-conic-120/longer",
+  "-bg-conic-120/shorter",
+  "-bg-conic-120/increasing",
+  "-bg-conic-120/decreasing",
+  "-bg-conic-150",
+  "-bg-conic-150/oklab",
+  "-bg-conic-150/oklch",
+  "-bg-conic-150/srgb",
+  "-bg-conic-150/hsl",
+  "-bg-conic-150/longer",
+  "-bg-conic-150/shorter",
+  "-bg-conic-150/increasing",
+  "-bg-conic-150/decreasing",
+  "-bg-conic-180",
+  "-bg-conic-180/oklab",
+  "-bg-conic-180/oklch",
+  "-bg-conic-180/srgb",
+  "-bg-conic-180/hsl",
+  "-bg-conic-180/longer",
+  "-bg-conic-180/shorter",
+  "-bg-conic-180/increasing",
+  "-bg-conic-180/decreasing",
+  "-bg-conic-210",
+  "-bg-conic-210/oklab",
+  "-bg-conic-210/oklch",
+  "-bg-conic-210/srgb",
+  "-bg-conic-210/hsl",
+  "-bg-conic-210/longer",
+  "-bg-conic-210/shorter",
+  "-bg-conic-210/increasing",
+  "-bg-conic-210/decreasing",
+  "-bg-conic-240",
+  "-bg-conic-240/oklab",
+  "-bg-conic-240/oklch",
+  "-bg-conic-240/srgb",
+  "-bg-conic-240/hsl",
+  "-bg-conic-240/longer",
+  "-bg-conic-240/shorter",
+  "-bg-conic-240/increasing",
+  "-bg-conic-240/decreasing",
+  "-bg-conic-270",
+  "-bg-conic-270/oklab",
+  "-bg-conic-270/oklch",
+  "-bg-conic-270/srgb",
+  "-bg-conic-270/hsl",
+  "-bg-conic-270/longer",
+  "-bg-conic-270/shorter",
+  "-bg-conic-270/increasing",
+  "-bg-conic-270/decreasing",
+  "-bg-conic-30",
+  "-bg-conic-30/oklab",
+  "-bg-conic-30/oklch",
+  "-bg-conic-30/srgb",
+  "-bg-conic-30/hsl",
+  "-bg-conic-30/longer",
+  "-bg-conic-30/shorter",
+  "-bg-conic-30/increasing",
+  "-bg-conic-30/decreasing",
+  "-bg-conic-300",
+  "-bg-conic-300/oklab",
+  "-bg-conic-300/oklch",
+  "-bg-conic-300/srgb",
+  "-bg-conic-300/hsl",
+  "-bg-conic-300/longer",
+  "-bg-conic-300/shorter",
+  "-bg-conic-300/increasing",
+  "-bg-conic-300/decreasing",
+  "-bg-conic-330",
+  "-bg-conic-330/oklab",
+  "-bg-conic-330/oklch",
+  "-bg-conic-330/srgb",
+  "-bg-conic-330/hsl",
+  "-bg-conic-330/longer",
+  "-bg-conic-330/shorter",
+  "-bg-conic-330/increasing",
+  "-bg-conic-330/decreasing",
+  "-bg-conic-60",
+  "-bg-conic-60/oklab",
+  "-bg-conic-60/oklch",
+  "-bg-conic-60/srgb",
+  "-bg-conic-60/hsl",
+  "-bg-conic-60/longer",
+  "-bg-conic-60/shorter",
+  "-bg-conic-60/increasing",
+  "-bg-conic-60/decreasing",
+  "-bg-conic-90",
+  "-bg-conic-90/oklab",
+  "-bg-conic-90/oklch",
+  "-bg-conic-90/srgb",
+  "-bg-conic-90/hsl",
+  "-bg-conic-90/longer",
+  "-bg-conic-90/shorter",
+  "-bg-conic-90/increasing",
+  "-bg-conic-90/decreasing",
+  "-bg-linear-0",
+  "-bg-linear-0/oklab",
+  "-bg-linear-0/oklch",
+  "-bg-linear-0/srgb",
+  "-bg-linear-0/hsl",
+  "-bg-linear-0/longer",
+  "-bg-linear-0/shorter",
+  "-bg-linear-0/increasing",
+  "-bg-linear-0/decreasing",
+  "-bg-linear-120",
+  "-bg-linear-120/oklab",
+  "-bg-linear-120/oklch",
+  "-bg-linear-120/srgb",
+  "-bg-linear-120/hsl",
+  "-bg-linear-120/longer",
+  "-bg-linear-120/shorter",
+  "-bg-linear-120/increasing",
+  "-bg-linear-120/decreasing",
+  "-bg-linear-150",
+  "-bg-linear-150/oklab",
+  "-bg-linear-150/oklch",
+  "-bg-linear-150/srgb",
+  "-bg-linear-150/hsl",
+  "-bg-linear-150/longer",
+  "-bg-linear-150/shorter",
+  "-bg-linear-150/increasing",
+  "-bg-linear-150/decreasing",
+  "-bg-linear-180",
+  "-bg-linear-180/oklab",
+  "-bg-linear-180/oklch",
+  "-bg-linear-180/srgb",
+  "-bg-linear-180/hsl",
+  "-bg-linear-180/longer",
+  "-bg-linear-180/shorter",
+  "-bg-linear-180/increasing",
+  "-bg-linear-180/decreasing",
+  "-bg-linear-210",
+  "-bg-linear-210/oklab",
+  "-bg-linear-210/oklch",
+  "-bg-linear-210/srgb",
+  "-bg-linear-210/hsl",
+  "-bg-linear-210/longer",
+  "-bg-linear-210/shorter",
+  "-bg-linear-210/increasing",
+  "-bg-linear-210/decreasing",
+  "-bg-linear-240",
+  "-bg-linear-240/oklab",
+  "-bg-linear-240/oklch",
+  "-bg-linear-240/srgb",
+  "-bg-linear-240/hsl",
+  "-bg-linear-240/longer",
+  "-bg-linear-240/shorter",
+  "-bg-linear-240/increasing",
+  "-bg-linear-240/decreasing",
+  "-bg-linear-270",
+  "-bg-linear-270/oklab",
+  "-bg-linear-270/oklch",
+  "-bg-linear-270/srgb",
+  "-bg-linear-270/hsl",
+  "-bg-linear-270/longer",
+  "-bg-linear-270/shorter",
+  "-bg-linear-270/increasing",
+  "-bg-linear-270/decreasing",
+  "-bg-linear-30",
+  "-bg-linear-30/oklab",
+  "-bg-linear-30/oklch",
+  "-bg-linear-30/srgb",
+  "-bg-linear-30/hsl",
+  "-bg-linear-30/longer",
+  "-bg-linear-30/shorter",
+  "-bg-linear-30/increasing",
+  "-bg-linear-30/decreasing",
+  "-bg-linear-300",
+  "-bg-linear-300/oklab",
+  "-bg-linear-300/oklch",
+  "-bg-linear-300/srgb",
+  "-bg-linear-300/hsl",
+  "-bg-linear-300/longer",
+  "-bg-linear-300/shorter",
+  "-bg-linear-300/increasing",
+  "-bg-linear-300/decreasing",
+  "-bg-linear-330",
+  "-bg-linear-330/oklab",
+  "-bg-linear-330/oklch",
+  "-bg-linear-330/srgb",
+  "-bg-linear-330/hsl",
+  "-bg-linear-330/longer",
+  "-bg-linear-330/shorter",
+  "-bg-linear-330/increasing",
+  "-bg-linear-330/decreasing",
+  "-bg-linear-60",
+  "-bg-linear-60/oklab",
+  "-bg-linear-60/oklch",
+  "-bg-linear-60/srgb",
+  "-bg-linear-60/hsl",
+  "-bg-linear-60/longer",
+  "-bg-linear-60/shorter",
+  "-bg-linear-60/increasing",
+  "-bg-linear-60/decreasing",
+  "-bg-linear-90",
+  "-bg-linear-90/oklab",
+  "-bg-linear-90/oklch",
+  "-bg-linear-90/srgb",
+  "-bg-linear-90/hsl",
+  "-bg-linear-90/longer",
+  "-bg-linear-90/shorter",
+  "-bg-linear-90/increasing",
+  "-bg-linear-90/decreasing",
   "-bottom-0",
   "-bottom-0.5",
   "-bottom-1",
@@ -1599,6 +1815,123 @@ exports[`getClassList 1`] = `
   "bg-clip-content",
   "bg-clip-padding",
   "bg-clip-text",
+  "bg-conic",
+  "bg-conic/oklab",
+  "bg-conic/oklch",
+  "bg-conic/srgb",
+  "bg-conic/hsl",
+  "bg-conic/longer",
+  "bg-conic/shorter",
+  "bg-conic/increasing",
+  "bg-conic/decreasing",
+  "bg-conic-0",
+  "bg-conic-0/oklab",
+  "bg-conic-0/oklch",
+  "bg-conic-0/srgb",
+  "bg-conic-0/hsl",
+  "bg-conic-0/longer",
+  "bg-conic-0/shorter",
+  "bg-conic-0/increasing",
+  "bg-conic-0/decreasing",
+  "bg-conic-120",
+  "bg-conic-120/oklab",
+  "bg-conic-120/oklch",
+  "bg-conic-120/srgb",
+  "bg-conic-120/hsl",
+  "bg-conic-120/longer",
+  "bg-conic-120/shorter",
+  "bg-conic-120/increasing",
+  "bg-conic-120/decreasing",
+  "bg-conic-150",
+  "bg-conic-150/oklab",
+  "bg-conic-150/oklch",
+  "bg-conic-150/srgb",
+  "bg-conic-150/hsl",
+  "bg-conic-150/longer",
+  "bg-conic-150/shorter",
+  "bg-conic-150/increasing",
+  "bg-conic-150/decreasing",
+  "bg-conic-180",
+  "bg-conic-180/oklab",
+  "bg-conic-180/oklch",
+  "bg-conic-180/srgb",
+  "bg-conic-180/hsl",
+  "bg-conic-180/longer",
+  "bg-conic-180/shorter",
+  "bg-conic-180/increasing",
+  "bg-conic-180/decreasing",
+  "bg-conic-210",
+  "bg-conic-210/oklab",
+  "bg-conic-210/oklch",
+  "bg-conic-210/srgb",
+  "bg-conic-210/hsl",
+  "bg-conic-210/longer",
+  "bg-conic-210/shorter",
+  "bg-conic-210/increasing",
+  "bg-conic-210/decreasing",
+  "bg-conic-240",
+  "bg-conic-240/oklab",
+  "bg-conic-240/oklch",
+  "bg-conic-240/srgb",
+  "bg-conic-240/hsl",
+  "bg-conic-240/longer",
+  "bg-conic-240/shorter",
+  "bg-conic-240/increasing",
+  "bg-conic-240/decreasing",
+  "bg-conic-270",
+  "bg-conic-270/oklab",
+  "bg-conic-270/oklch",
+  "bg-conic-270/srgb",
+  "bg-conic-270/hsl",
+  "bg-conic-270/longer",
+  "bg-conic-270/shorter",
+  "bg-conic-270/increasing",
+  "bg-conic-270/decreasing",
+  "bg-conic-30",
+  "bg-conic-30/oklab",
+  "bg-conic-30/oklch",
+  "bg-conic-30/srgb",
+  "bg-conic-30/hsl",
+  "bg-conic-30/longer",
+  "bg-conic-30/shorter",
+  "bg-conic-30/increasing",
+  "bg-conic-30/decreasing",
+  "bg-conic-300",
+  "bg-conic-300/oklab",
+  "bg-conic-300/oklch",
+  "bg-conic-300/srgb",
+  "bg-conic-300/hsl",
+  "bg-conic-300/longer",
+  "bg-conic-300/shorter",
+  "bg-conic-300/increasing",
+  "bg-conic-300/decreasing",
+  "bg-conic-330",
+  "bg-conic-330/oklab",
+  "bg-conic-330/oklch",
+  "bg-conic-330/srgb",
+  "bg-conic-330/hsl",
+  "bg-conic-330/longer",
+  "bg-conic-330/shorter",
+  "bg-conic-330/increasing",
+  "bg-conic-330/decreasing",
+  "bg-conic-60",
+  "bg-conic-60/oklab",
+  "bg-conic-60/oklch",
+  "bg-conic-60/srgb",
+  "bg-conic-60/hsl",
+  "bg-conic-60/longer",
+  "bg-conic-60/shorter",
+  "bg-conic-60/increasing",
+  "bg-conic-60/decreasing",
+  "bg-conic-90",
+  "bg-conic-90/oklab",
+  "bg-conic-90/oklch",
+  "bg-conic-90/srgb",
+  "bg-conic-90/hsl",
+  "bg-conic-90/longer",
+  "bg-conic-90/shorter",
+  "bg-conic-90/increasing",
+  "bg-conic-90/decreasing",
   "bg-contain",
   "bg-cover",
   "bg-current",
@@ -1657,20 +1990,201 @@ exports[`getClassList 1`] = `
   "bg-left",
   "bg-left-bottom",
   "bg-left-top",
+  "bg-linear-0",
+  "bg-linear-0/oklab",
+  "bg-linear-0/oklch",
+  "bg-linear-0/srgb",
+  "bg-linear-0/hsl",
+  "bg-linear-0/longer",
+  "bg-linear-0/shorter",
+  "bg-linear-0/increasing",
+  "bg-linear-0/decreasing",
+  "bg-linear-120",
+  "bg-linear-120/oklab",
+  "bg-linear-120/oklch",
+  "bg-linear-120/srgb",
+  "bg-linear-120/hsl",
+  "bg-linear-120/longer",
+  "bg-linear-120/shorter",
+  "bg-linear-120/increasing",
+  "bg-linear-120/decreasing",
+  "bg-linear-150",
+  "bg-linear-150/oklab",
+  "bg-linear-150/oklch",
+  "bg-linear-150/srgb",
+  "bg-linear-150/hsl",
+  "bg-linear-150/longer",
+  "bg-linear-150/shorter",
+  "bg-linear-150/increasing",
+  "bg-linear-150/decreasing",
+  "bg-linear-180",
+  "bg-linear-180/oklab",
+  "bg-linear-180/oklch",
+  "bg-linear-180/srgb",
+  "bg-linear-180/hsl",
+  "bg-linear-180/longer",
+  "bg-linear-180/shorter",
+  "bg-linear-180/increasing",
+  "bg-linear-180/decreasing",
+  "bg-linear-210",
+  "bg-linear-210/oklab",
+  "bg-linear-210/oklch",
+  "bg-linear-210/srgb",
+  "bg-linear-210/hsl",
+  "bg-linear-210/longer",
+  "bg-linear-210/shorter",
+  "bg-linear-210/increasing",
+  "bg-linear-210/decreasing",
+  "bg-linear-240",
+  "bg-linear-240/oklab",
+  "bg-linear-240/oklch",
+  "bg-linear-240/srgb",
+  "bg-linear-240/hsl",
+  "bg-linear-240/longer",
+  "bg-linear-240/shorter",
+  "bg-linear-240/increasing",
+  "bg-linear-240/decreasing",
+  "bg-linear-270",
+  "bg-linear-270/oklab",
+  "bg-linear-270/oklch",
+  "bg-linear-270/srgb",
+  "bg-linear-270/hsl",
+  "bg-linear-270/longer",
+  "bg-linear-270/shorter",
+  "bg-linear-270/increasing",
+  "bg-linear-270/decreasing",
+  "bg-linear-30",
+  "bg-linear-30/oklab",
+  "bg-linear-30/oklch",
+  "bg-linear-30/srgb",
+  "bg-linear-30/hsl",
+  "bg-linear-30/longer",
+  "bg-linear-30/shorter",
+  "bg-linear-30/increasing",
+  "bg-linear-30/decreasing",
+  "bg-linear-300",
+  "bg-linear-300/oklab",
+  "bg-linear-300/oklch",
+  "bg-linear-300/srgb",
+  "bg-linear-300/hsl",
+  "bg-linear-300/longer",
+  "bg-linear-300/shorter",
+  "bg-linear-300/increasing",
+  "bg-linear-300/decreasing",
+  "bg-linear-330",
+  "bg-linear-330/oklab",
+  "bg-linear-330/oklch",
+  "bg-linear-330/srgb",
+  "bg-linear-330/hsl",
+  "bg-linear-330/longer",
+  "bg-linear-330/shorter",
+  "bg-linear-330/increasing",
+  "bg-linear-330/decreasing",
+  "bg-linear-60",
+  "bg-linear-60/oklab",
+  "bg-linear-60/oklch",
+  "bg-linear-60/srgb",
+  "bg-linear-60/hsl",
+  "bg-linear-60/longer",
+  "bg-linear-60/shorter",
+  "bg-linear-60/increasing",
+  "bg-linear-60/decreasing",
+  "bg-linear-90",
+  "bg-linear-90/oklab",
+  "bg-linear-90/oklch",
+  "bg-linear-90/srgb",
+  "bg-linear-90/hsl",
+  "bg-linear-90/longer",
+  "bg-linear-90/shorter",
+  "bg-linear-90/increasing",
+  "bg-linear-90/decreasing",
   "bg-linear-to-b",
+  "bg-linear-to-b/oklab",
+  "bg-linear-to-b/oklch",
+  "bg-linear-to-b/srgb",
+  "bg-linear-to-b/hsl",
+  "bg-linear-to-b/longer",
+  "bg-linear-to-b/shorter",
+  "bg-linear-to-b/increasing",
+  "bg-linear-to-b/decreasing",
   "bg-linear-to-bl",
+  "bg-linear-to-bl/oklab",
+  "bg-linear-to-bl/oklch",
+  "bg-linear-to-bl/srgb",
+  "bg-linear-to-bl/hsl",
+  "bg-linear-to-bl/longer",
+  "bg-linear-to-bl/shorter",
+  "bg-linear-to-bl/increasing",
+  "bg-linear-to-bl/decreasing",
   "bg-linear-to-br",
+  "bg-linear-to-br/oklab",
+  "bg-linear-to-br/oklch",
+  "bg-linear-to-br/srgb",
+  "bg-linear-to-br/hsl",
+  "bg-linear-to-br/longer",
+  "bg-linear-to-br/shorter",
+  "bg-linear-to-br/increasing",
+  "bg-linear-to-br/decreasing",
   "bg-linear-to-l",
+  "bg-linear-to-l/oklab",
+  "bg-linear-to-l/oklch",
+  "bg-linear-to-l/srgb",
+  "bg-linear-to-l/hsl",
+  "bg-linear-to-l/longer",
+  "bg-linear-to-l/shorter",
+  "bg-linear-to-l/increasing",
+  "bg-linear-to-l/decreasing",
   "bg-linear-to-r",
+  "bg-linear-to-r/oklab",
+  "bg-linear-to-r/oklch",
+  "bg-linear-to-r/srgb",
+  "bg-linear-to-r/hsl",
+  "bg-linear-to-r/longer",
+  "bg-linear-to-r/shorter",
+  "bg-linear-to-r/increasing",
+  "bg-linear-to-r/decreasing",
   "bg-linear-to-t",
+  "bg-linear-to-t/oklab",
+  "bg-linear-to-t/oklch",
+  "bg-linear-to-t/srgb",
+  "bg-linear-to-t/hsl",
+  "bg-linear-to-t/longer",
+  "bg-linear-to-t/shorter",
+  "bg-linear-to-t/increasing",
+  "bg-linear-to-t/decreasing",
   "bg-linear-to-tl",
+  "bg-linear-to-tl/oklab",
+  "bg-linear-to-tl/oklch",
+  "bg-linear-to-tl/srgb",
+  "bg-linear-to-tl/hsl",
+  "bg-linear-to-tl/longer",
+  "bg-linear-to-tl/shorter",
+  "bg-linear-to-tl/increasing",
+  "bg-linear-to-tl/decreasing",
   "bg-linear-to-tr",
+  "bg-linear-to-tr/oklab",
+  "bg-linear-to-tr/oklch",
+  "bg-linear-to-tr/srgb",
+  "bg-linear-to-tr/hsl",
+  "bg-linear-to-tr/longer",
+  "bg-linear-to-tr/shorter",
+  "bg-linear-to-tr/increasing",
+  "bg-linear-to-tr/decreasing",
   "bg-local",
   "bg-no-repeat",
   "bg-none",
   "bg-origin-border",
   "bg-origin-content",
   "bg-origin-padding",
+  "bg-radial",
+  "bg-radial/oklab",
+  "bg-radial/oklch",
+  "bg-radial/srgb",
+  "bg-radial/hsl",
+  "bg-radial/longer",
+  "bg-radial/shorter",
+  "bg-radial/increasing",
+  "bg-radial/decreasing",
   "bg-repeat",
   "bg-repeat-x",
   "bg-repeat-y",
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 88f57077b490..dfe1535408dc 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -10086,6 +10086,47 @@ test('bg', async () => {
         'bg-linear-45',
         '-bg-linear-45',
 
+        // With interpolation mode modifier
+        'bg-linear-to-r/oklch',
+        'bg-linear-to-r/oklab',
+        'bg-linear-to-r/hsl',
+        'bg-linear-to-r/srgb',
+        'bg-linear-to-r/longer',
+        'bg-linear-to-r/shorter',
+        'bg-linear-to-r/increasing',
+        'bg-linear-to-r/decreasing',
+        'bg-linear-to-r/[in_hsl_longer_hue]',
+        'bg-linear-45/oklab',
+        '-bg-linear-45/oklab',
+        'bg-linear-45/shorter',
+        'bg-linear-45/[in_hsl_longer_hue]',
+        'bg-conic/oklch',
+        'bg-conic/oklab',
+        'bg-conic/hsl',
+        'bg-conic/srgb',
+        'bg-conic/longer',
+        'bg-conic/shorter',
+        'bg-conic/increasing',
+        'bg-conic/decreasing',
+        'bg-conic/[in_hsl_longer_hue]',
+        'bg-conic-45/oklab',
+        '-bg-conic-45/oklab',
+        'bg-conic-45/shorter',
+        'bg-conic-45/[in_hsl_longer_hue]',
+        'bg-radial/oklch',
+        'bg-radial/oklab',
+        'bg-radial/hsl',
+        'bg-radial/srgb',
+        'bg-radial/longer',
+        'bg-radial/shorter',
+        'bg-radial/increasing',
+        'bg-radial/decreasing',
+        'bg-radial/[in_hsl_longer_hue]',
+        'bg-radial-[circle_at_center]',
+        // Invalid but proves not converted to `in oklch longer hue` when used
+        // as an arbitrary value
+        'bg-linear-to-r/[longer]',
+
         'bg-[url(/image.png)]',
         'bg-[url:var(--my-url)]',
         'bg-[linear-gradient(to_bottom,red,blue)]',
@@ -10203,11 +10244,21 @@ test('bg', async () => {
       background-color: #0000;
     }
 
+    .-bg-conic-45\\/oklab {
+      --tw-gradient-position: from calc(45 * -1) in oklab, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
     .-bg-linear-45 {
       --tw-gradient-position: calc(45deg * -1) in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .-bg-linear-45\\/oklab {
+      --tw-gradient-position: calc(45deg * -1) in oklab, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
     .-bg-linear-\\[1\\.3rad\\] {
       --tw-gradient-position: calc(74.4845deg * -1), ;
       background-image: linear-gradient(var(--tw-gradient-stops, calc(74.4845deg * -1)));
@@ -10218,6 +10269,66 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops, calc(125deg * -1)));
     }
 
+    .bg-conic-45\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: from 45deg in hsl longer hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic-45\\/oklab {
+      --tw-gradient-position: from 45deg in oklab, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic-45\\/shorter {
+      --tw-gradient-position: from 45deg in oklch shorter hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: in hsl longer hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/decreasing {
+      --tw-gradient-position: in oklch decreasing hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/hsl {
+      --tw-gradient-position: in hsl, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/increasing {
+      --tw-gradient-position: in oklch increasing hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/longer {
+      --tw-gradient-position: in oklch longer hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/oklab {
+      --tw-gradient-position: in oklab, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/oklch {
+      --tw-gradient-position: in oklch, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/shorter {
+      --tw-gradient-position: in oklch shorter hue, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-conic\\/srgb {
+      --tw-gradient-position: in srgb, ;
+      background-image: conic-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-gradient-to-b {
       --tw-gradient-position: to bottom in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
@@ -10263,6 +10374,21 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-linear-45\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: 45deg in hsl longer hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-45\\/oklab {
+      --tw-gradient-position: 45deg in oklab, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-45\\/shorter {
+      --tw-gradient-position: 45deg in oklch shorter hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-linear-\\[1\\.3rad\\] {
       --tw-gradient-position: 74.4845deg, ;
       background-image: linear-gradient(var(--tw-gradient-stops, 74.4845deg));
@@ -10303,6 +10429,56 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-linear-to-r\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: to right in hsl longer hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/\\[longer\\] {
+      --tw-gradient-position: to right longer, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/decreasing {
+      --tw-gradient-position: to right in oklch decreasing hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/hsl {
+      --tw-gradient-position: to right in hsl, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/increasing {
+      --tw-gradient-position: to right in oklch increasing hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/longer {
+      --tw-gradient-position: to right in oklch longer hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/oklab {
+      --tw-gradient-position: to right in oklab, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/oklch {
+      --tw-gradient-position: to right in oklch, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/shorter {
+      --tw-gradient-position: to right in oklch shorter hue, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-linear-to-r\\/srgb {
+      --tw-gradient-position: to right in srgb, ;
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-linear-to-t {
       --tw-gradient-position: to top in oklch, ;
       background-image: linear-gradient(var(--tw-gradient-stops));
@@ -10318,6 +10494,56 @@ test('bg', async () => {
       background-image: linear-gradient(var(--tw-gradient-stops));
     }
 
+    .bg-radial-\\[circle_at_center\\] {
+      --tw-gradient-position: circle at center, ;
+      background-image: radial-gradient(var(--tw-gradient-stops, circle at center));
+    }
+
+    .bg-radial\\/\\[in_hsl_longer_hue\\] {
+      --tw-gradient-position: in hsl longer hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/decreasing {
+      --tw-gradient-position: in oklch decreasing hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/hsl {
+      --tw-gradient-position: in hsl, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/increasing {
+      --tw-gradient-position: in oklch increasing hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/longer {
+      --tw-gradient-position: in oklch longer hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/oklab {
+      --tw-gradient-position: in oklab, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/oklch {
+      --tw-gradient-position: in oklch, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/shorter {
+      --tw-gradient-position: in oklch shorter hue, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
+    .bg-radial\\/srgb {
+      --tw-gradient-position: in srgb, ;
+      background-image: radial-gradient(var(--tw-gradient-stops));
+    }
+
     .bg-\\[image\\:var\\(--my-gradient\\)\\] {
       background-image: var(--my-gradient);
     }
@@ -10498,31 +10724,13 @@ test('bg', async () => {
       '-bg-space',
 
       'bg-none/foo',
-      'bg-gradient-to-t/foo',
-      'bg-gradient-to-tr/foo',
-      'bg-gradient-to-r/foo',
-      'bg-gradient-to-br/foo',
-      'bg-gradient-to-b/foo',
-      'bg-gradient-to-bl/foo',
-      'bg-gradient-to-l/foo',
-      'bg-gradient-to-tl/foo',
-      'bg-linear-to-t/foo',
-      'bg-linear-to-tr/foo',
-      'bg-linear-to-r/foo',
-      'bg-linear-to-br/foo',
-      'bg-linear-to-b/foo',
-      'bg-linear-to-bl/foo',
-      'bg-linear-to-l/foo',
-      'bg-linear-to-tl/foo',
       'bg-[url(/image.png)]/foo',
       'bg-[url:var(--my-url)]/foo',
       'bg-[linear-gradient(to_bottom,red,blue)]/foo',
       'bg-[image:var(--my-gradient)]/foo',
-      'bg-linear-[125deg]/foo',
-      'bg-linear-[1.3rad]/foo',
-      'bg-linear-[to_bottom]/foo',
-      '-bg-linear-[125deg]/foo',
-      '-bg-linear-[1.3rad]/foo',
+      'bg-linear-[to_bottom]/hsl',
+      'bg-conic-[45deg]/hsl',
+      'bg-conic-[circle_at_center]/hsl',
       'bg-auto/foo',
       'bg-cover/foo',
       'bg-contain/foo',
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 968f629e37ce..785b5ff6c119 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2261,122 +2261,205 @@ export function createUtilities(theme: Theme) {
 
   staticUtility('bg-none', [['background-image', 'none']])
 
-  for (let [value, direction] of [
-    ['t', 'top'],
-    ['tr', 'top right'],
-    ['r', 'right'],
-    ['br', 'bottom right'],
-    ['b', 'bottom'],
-    ['bl', 'bottom left'],
-    ['l', 'left'],
-    ['tl', 'top left'],
-  ]) {
-    staticUtility(`bg-gradient-to-${value}`, [
-      ['--tw-gradient-position', `to ${direction} in oklch,`],
-      ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
-    ])
+  {
+    // Deprecated
+    for (let [value, direction] of [
+      ['t', 'top'],
+      ['tr', 'top right'],
+      ['r', 'right'],
+      ['br', 'bottom right'],
+      ['b', 'bottom'],
+      ['bl', 'bottom left'],
+      ['l', 'left'],
+      ['tl', 'top left'],
+    ]) {
+      staticUtility(`bg-gradient-to-${value}`, [
+        ['--tw-gradient-position', `to ${direction} in oklch,`],
+        ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
+      ])
+    }
 
-    staticUtility(`bg-linear-to-${value}`, [
-      ['--tw-gradient-position', `to ${direction} in oklch,`],
-      ['background-image', `linear-gradient(var(--tw-gradient-stops))`],
+    let suggestedModifiers = [
+      'oklab',
+      'oklch',
+      'srgb',
+      'hsl',
+      'longer',
+      'shorter',
+      'increasing',
+      'decreasing',
+    ]
+
+    let linearGradientDirections = new Map([
+      ['to-t', 'to top'],
+      ['to-tr', 'to top right'],
+      ['to-r', 'to right'],
+      ['to-br', 'to bottom right'],
+      ['to-b', 'to bottom'],
+      ['to-bl', 'to bottom left'],
+      ['to-l', 'to left'],
+      ['to-tl', 'to top left'],
     ])
-  }
 
-  function handleBgLinear({ negative }: { negative: boolean }) {
-    return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-      if (!candidate.value || candidate.modifier) return
+    function resolveInterpolationModifier(modifier: CandidateModifier | null) {
+      let interpolationMethod = 'in oklch'
+
+      if (modifier?.kind === 'named') {
+        switch (modifier.value) {
+          case 'longer':
+          case 'shorter':
+          case 'increasing':
+          case 'decreasing':
+            interpolationMethod = `in oklch ${modifier.value} hue`
+            break
+          default:
+            interpolationMethod = `in ${modifier.value}`
+        }
+      } else if (modifier?.kind === 'arbitrary') {
+        interpolationMethod = modifier.value
+      }
 
-      let value = candidate.value.value
+      return interpolationMethod
+    }
 
-      if (candidate.value.kind === 'arbitrary') {
-        let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
+    function handleBgLinear({ negative }: { negative: boolean }) {
+      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
+        if (!candidate.value) return
 
-        switch (type) {
-          case 'angle': {
-            value = negative ? `calc(${value} * -1)` : `${value}`
+        if (candidate.value.kind === 'arbitrary') {
+          if (candidate.modifier) return
 
-            return [
-              decl('--tw-gradient-position', `${value},`),
-              decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
-            ]
-          }
-          default: {
-            if (negative) return
+          let value = candidate.value.value
+          let type = candidate.value.dataType ?? inferDataType(value, ['angle'])
 
-            return [
-              decl('--tw-gradient-position', `${value},`),
-              decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
-            ]
+          switch (type) {
+            case 'angle': {
+              value = negative ? `calc(${value} * -1)` : `${value}`
+
+              return [
+                decl('--tw-gradient-position', `${value},`),
+                decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
+              ]
+            }
+            default: {
+              if (negative) return
+
+              return [
+                decl('--tw-gradient-position', `${value},`),
+                decl('background-image', `linear-gradient(var(--tw-gradient-stops,${value}))`),
+              ]
+            }
           }
         }
-      } else {
-        if (!isPositiveInteger(value)) return
 
-        value = negative ? `calc(${value}deg * -1)` : `${value}deg`
+        let value = candidate.value.value
+
+        if (!negative && linearGradientDirections.has(value)) {
+          value = linearGradientDirections.get(value)!
+        } else if (isPositiveInteger(value)) {
+          value = negative ? `calc(${value}deg * -1)` : `${value}deg`
+        } else {
+          return
+        }
+
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
 
         return [
-          decl('--tw-gradient-position', `${value} in oklch,`),
+          decl('--tw-gradient-position', `${value} ${interpolationMethod},`),
           decl('background-image', `linear-gradient(var(--tw-gradient-stops))`),
         ]
       }
     }
-  }
 
-  utilities.functional('-bg-linear', handleBgLinear({ negative: true }))
-  utilities.functional('bg-linear', handleBgLinear({ negative: false }))
+    utilities.functional('-bg-linear', handleBgLinear({ negative: true }))
+    utilities.functional('bg-linear', handleBgLinear({ negative: false }))
 
-  function handleBgConic({ negative }: { negative: boolean }) {
-    return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
-      if (candidate.modifier) return
+    suggest('bg-linear', () => [
+      {
+        values: [...linearGradientDirections.keys()],
+        modifiers: suggestedModifiers,
+      },
+      {
+        values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
+        supportsNegative: true,
+        modifiers: suggestedModifiers,
+      },
+    ])
 
-      if (!candidate.value) {
-        return [
-          decl('--tw-gradient-position', `in oklch,`),
-          decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
-        ]
-      }
+    function handleBgConic({ negative }: { negative: boolean }) {
+      return (candidate: Extract<Candidate, { kind: 'functional' }>) => {
+        if (candidate.value?.kind === 'arbitrary') {
+          if (candidate.modifier) return
+          let value = candidate.value.value
+          return [
+            decl('--tw-gradient-position', `${value},`),
+            decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
+          ]
+        }
 
-      let value = candidate.value.value
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
+
+        if (!candidate.value) {
+          return [
+            decl('--tw-gradient-position', `${interpolationMethod},`),
+            decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
+          ]
+        }
+
+        let value = candidate.value.value
 
-      if (candidate.value.kind === 'arbitrary') {
-        return [
-          decl('--tw-gradient-position', `${value},`),
-          decl('background-image', `conic-gradient(var(--tw-gradient-stops,${value}))`),
-        ]
-      } else {
         if (!isPositiveInteger(value)) return
 
         value = negative ? `calc(${value} * -1)` : `${value}deg`
 
         return [
-          decl('--tw-gradient-position', `from ${value} in oklch,`),
+          decl('--tw-gradient-position', `from ${value} ${interpolationMethod},`),
           decl('background-image', `conic-gradient(var(--tw-gradient-stops))`),
         ]
       }
     }
-  }
 
-  utilities.functional('-bg-conic', handleBgConic({ negative: true }))
-  utilities.functional('bg-conic', handleBgConic({ negative: false }))
+    utilities.functional('-bg-conic', handleBgConic({ negative: true }))
+    utilities.functional('bg-conic', handleBgConic({ negative: false }))
 
-  utilities.functional('bg-radial', (candidate) => {
-    if (candidate.modifier) return
+    suggest('bg-conic', () => [
+      {
+        hasDefaultValue: true,
+        modifiers: suggestedModifiers,
+      },
+      {
+        values: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
+        supportsNegative: true,
+        modifiers: suggestedModifiers,
+      },
+    ])
 
-    if (!candidate.value) {
-      return [
-        decl('--tw-gradient-position', `in oklch,`),
-        decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
-      ]
-    }
+    utilities.functional('bg-radial', (candidate) => {
+      if (!candidate.value) {
+        let interpolationMethod = resolveInterpolationModifier(candidate.modifier)
+        return [
+          decl('--tw-gradient-position', `${interpolationMethod},`),
+          decl('background-image', `radial-gradient(var(--tw-gradient-stops))`),
+        ]
+      }
 
-    if (candidate.value.kind === 'arbitrary') {
-      let value = candidate.value.value
-      return [
-        decl('--tw-gradient-position', `${value},`),
-        decl('background-image', `radial-gradient(var(--tw-gradient-stops,${value}))`),
-      ]
-    }
-  })
+      if (candidate.value.kind === 'arbitrary') {
+        if (candidate.modifier) return
+        let value = candidate.value.value
+        return [
+          decl('--tw-gradient-position', `${value},`),
+          decl('background-image', `radial-gradient(var(--tw-gradient-stops,${value}))`),
+        ]
+      }
+    })
+
+    suggest('bg-radial', () => [
+      {
+        hasDefaultValue: true,
+        modifiers: suggestedModifiers,
+      },
+    ])
+  }
 
   utilities.functional('bg', (candidate) => {
     if (!candidate.value) return