diff --git a/integrations/upgrade/index.test.ts b/integrations/upgrade/index.test.ts
index aa2e344ee..6393fbaa8 100644
--- a/integrations/upgrade/index.test.ts
+++ b/integrations/upgrade/index.test.ts
@@ -19,7 +19,7 @@ test(
       `,
       'src/index.html': html`
         <h1>🤠👋</h1>
-        <div class="!flex sm:!block"></div>
+        <div class="!flex sm:!block bg-gradient-to-t"></div>
       `,
       'src/input.css': css`
         @tailwind base;
@@ -35,7 +35,7 @@ test(
       'src/index.html',
       html`
         <h1>🤠👋</h1>
-        <div class="flex! sm:block!"></div>
+        <div class="flex! sm:block! bg-linear-to-t"></div>
       `,
     )
 
diff --git a/packages/@tailwindcss-upgrade/src/template/migrate.ts b/packages/@tailwindcss-upgrade/src/template/migrate.ts
index c46be2afa..f1228cc81 100644
--- a/packages/@tailwindcss-upgrade/src/template/migrate.ts
+++ b/packages/@tailwindcss-upgrade/src/template/migrate.ts
@@ -3,6 +3,7 @@ import path from 'node:path'
 import type { Candidate } from '../../../tailwindcss/src/candidate'
 import type { DesignSystem } from '../../../tailwindcss/src/design-system'
 import { extractCandidates, printCandidate, replaceCandidateInContent } from './candidates'
+import { bgGradient } from './codemods/bg-gradient'
 import { migrateImportant } from './codemods/migrate-important'
 
 export type Migration = (candidate: Candidate) => Candidate | null
@@ -10,7 +11,7 @@ export type Migration = (candidate: Candidate) => Candidate | null
 export default async function migrateContents(
   designSystem: DesignSystem,
   contents: string,
-  migrations: Migration[] = [migrateImportant],
+  migrations: Migration[] = [migrateImportant, bgGradient],
 ): Promise<string> {
   let candidates = await extractCandidates(designSystem, contents)