diff --git a/CHANGELOG.md b/CHANGELOG.md
index d494939a5f35..51425dadadab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467))
 - Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468))
 - Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469))
+- Include gradient color properties in color transitions ([#14489](https://github.com/tailwindlabs/tailwindcss/pull/14489))
 
 ### Fixed
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index bdb5a841d9e0..1a518fc3aa8c 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -9926,8 +9926,8 @@ test('from', async () => {
         *, :before, :after, ::backdrop {
           --tw-gradient-position: initial;
           --tw-gradient-from: #0000;
+          --tw-gradient-via: #0000;
           --tw-gradient-to: #0000;
-          --tw-gradient-via: transparent;
           --tw-gradient-stops: initial;
           --tw-gradient-via-stops: initial;
           --tw-gradient-from-position: 0%;
@@ -9948,13 +9948,13 @@ test('from', async () => {
       initial-value: #0000;
     }
 
-    @property --tw-gradient-to {
+    @property --tw-gradient-via {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-via {
+    @property --tw-gradient-to {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
@@ -10171,8 +10171,8 @@ test('via', async () => {
         *, :before, :after, ::backdrop {
           --tw-gradient-position: initial;
           --tw-gradient-from: #0000;
+          --tw-gradient-via: #0000;
           --tw-gradient-to: #0000;
-          --tw-gradient-via: transparent;
           --tw-gradient-stops: initial;
           --tw-gradient-via-stops: initial;
           --tw-gradient-from-position: 0%;
@@ -10193,13 +10193,13 @@ test('via', async () => {
       initial-value: #0000;
     }
 
-    @property --tw-gradient-to {
+    @property --tw-gradient-via {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-via {
+    @property --tw-gradient-to {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
@@ -10404,8 +10404,8 @@ test('to', async () => {
         *, :before, :after, ::backdrop {
           --tw-gradient-position: initial;
           --tw-gradient-from: #0000;
+          --tw-gradient-via: #0000;
           --tw-gradient-to: #0000;
-          --tw-gradient-via: transparent;
           --tw-gradient-stops: initial;
           --tw-gradient-via-stops: initial;
           --tw-gradient-from-position: 0%;
@@ -10426,13 +10426,13 @@ test('to', async () => {
       initial-value: #0000;
     }
 
-    @property --tw-gradient-to {
+    @property --tw-gradient-via {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
     }
 
-    @property --tw-gradient-via {
+    @property --tw-gradient-to {
       syntax: "<color>";
       inherits: false;
       initial-value: #0000;
@@ -12897,7 +12897,7 @@ test('transition', async () => {
     }
 
     .transition {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
       transition-timing-function: var(--default-transition-timing-function, ease);
       transition-duration: var(--default-transition-duration, .1s);
     }
@@ -12915,7 +12915,7 @@ test('transition', async () => {
     }
 
     .transition-colors {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
       transition-timing-function: var(--default-transition-timing-function, ease);
       transition-duration: var(--default-transition-duration, .1s);
     }
@@ -12964,7 +12964,7 @@ test('transition', async () => {
     }
 
     .transition {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
       transition-duration: .1s;
       transition-timing-function: ease;
     }
@@ -12976,7 +12976,7 @@ test('transition', async () => {
     }
 
     .transition-colors {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
       transition-duration: .1s;
       transition-timing-function: ease;
     }"
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index e7cbaef4be98..6f0feb35e514 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2677,10 +2677,8 @@ export function createUtilities(theme: Theme) {
     return atRoot([
       property('--tw-gradient-position'),
       property('--tw-gradient-from', '#0000', '<color>'),
+      property('--tw-gradient-via', '#0000', '<color>'),
       property('--tw-gradient-to', '#0000', '<color>'),
-      property('--tw-gradient-from', 'transparent', '<color>'),
-      property('--tw-gradient-via', 'transparent', '<color>'),
-      property('--tw-gradient-to', 'transparent', '<color>'),
       property('--tw-gradient-stops'),
       property('--tw-gradient-via-stops'),
       property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
@@ -3716,7 +3714,7 @@ export function createUtilities(theme: Theme) {
     staticUtility('transition-colors', [
       [
         'transition-property',
-        'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to',
       ],
       ['transition-timing-function', defaultTimingFunction],
       ['transition-duration', defaultDuration],
@@ -3739,7 +3737,7 @@ export function createUtilities(theme: Theme) {
 
     functionalUtility('transition', {
       defaultValue:
-        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter',
+        'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter',
       themeKeys: ['--transition-property'],
       handle: (value) => [
         decl('transition-property', value),