diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97686836753e..62ad77ea8c03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645))
 - Add `whitespace-break-spaces` utility ([#10729](https://github.com/tailwindlabs/tailwindcss/pull/10729))
 - Add support for configuring default `font-variation-settings` for a `font-family` ([#10034](https://github.com/tailwindlabs/tailwindcss/pull/10034), [#10515](https://github.com/tailwindlabs/tailwindcss/pull/10515))
+- Add gradient color stop position utilities ([#10886](https://github.com/tailwindlabs/tailwindcss/pull/10886))
 
 ### Fixed
 
diff --git a/oxide/crates/core/src/parser.rs b/oxide/crates/core/src/parser.rs
index 4bba1f947583..16831afffd41 100644
--- a/oxide/crates/core/src/parser.rs
+++ b/oxide/crates/core/src/parser.rs
@@ -43,14 +43,14 @@ impl<'a> Extractor<'a> {
 
     #[cfg(test)]
     pub fn unique_ord(input: &'a [u8], opts: ExtractorOptions) -> Vec<&'a [u8]> {
-      // This is an inefficient way to get an ordered, unique
-      // list as a Vec but it is only meant for testing.
-      let mut candidates = Self::all(input, opts);
-      let mut unique_list = FxHashSet::default();
-      unique_list.reserve(candidates.len());
-      candidates.retain(|c| unique_list.insert(*c));
+        // This is an inefficient way to get an ordered, unique
+        // list as a Vec but it is only meant for testing.
+        let mut candidates = Self::all(input, opts);
+        let mut unique_list = FxHashSet::default();
+        unique_list.reserve(candidates.len());
+        candidates.retain(|c| unique_list.insert(*c));
 
-      candidates
+        candidates
     }
 }
 
@@ -319,7 +319,16 @@ impl<'a> Extractor<'a> {
 
             // Allowed characters in the candidate itself
             // None of these can come after a closing bracket `]`
-            b'a'..=b'z' | b'A'..=b'Z' | b'0'..=b'9' | b'-' | b'_' | b'(' | b')' | b'!' | b'@'
+            b'a'..=b'z'
+            | b'A'..=b'Z'
+            | b'0'..=b'9'
+            | b'-'
+            | b'_'
+            | b'('
+            | b')'
+            | b'!'
+            | b'@'
+            | b'%'
                 if prev != b']' =>
             {
                 /* TODO: The `b'@'` is necessary for custom separators like _@, maybe we can handle this in a better way... */
diff --git a/stubs/config.full.js b/stubs/config.full.js
index 55cc28f34222..c32ccd3a0ea2 100644
--- a/stubs/config.full.js
+++ b/stubs/config.full.js
@@ -356,27 +356,27 @@ module.exports = {
     gap: ({ theme }) => theme('spacing'),
     gradientColorStops: ({ theme }) => theme('colors'),
     gradientColorStopPositions: {
-      0: '0%',
-      5: '5%',
-      10: '10%',
-      15: '15%',
-      20: '20%',
-      25: '25%',
-      30: '30%',
-      35: '35%',
-      40: '40%',
-      45: '45%',
-      50: '50%',
-      55: '55%',
-      60: '60%',
-      65: '65%',
-      70: '70%',
-      75: '75%',
-      80: '80%',
-      85: '85%',
-      90: '90%',
-      95: '95%',
-      100: '100%',
+      '0%': '0%',
+      '5%': '5%',
+      '10%': '10%',
+      '15%': '15%',
+      '20%': '20%',
+      '25%': '25%',
+      '30%': '30%',
+      '35%': '35%',
+      '40%': '40%',
+      '45%': '45%',
+      '50%': '50%',
+      '55%': '55%',
+      '60%': '60%',
+      '65%': '65%',
+      '70%': '70%',
+      '75%': '75%',
+      '80%': '80%',
+      '85%': '85%',
+      '90%': '90%',
+      '95%': '95%',
+      '100%': '100%',
     },
     grayscale: {
       0: '0',
diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js
index 52ab30d19ae9..c16605e65133 100644
--- a/tests/plugins/gradientColorStops.test.js
+++ b/tests/plugins/gradientColorStops.test.js
@@ -127,4 +127,68 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  test('gradient color stop position', () => {
+    let config = {
+      content: [
+        {
+          raw: html`
+            <div>
+              <div
+                class="bg-gradient-to-r from-red-500 from-50 via-pink-500 via-75 to-violet-400 to-80"
+              ></div>
+              <div class="from-10% from-[11%]"></div>
+              <div class="via-20% via-[12%]"></div>
+              <div class="to-30% to-[13%]"></div>
+            </div>
+          `,
+        },
+      ],
+      theme: {},
+    }
+
+    return run('@tailwind utilities', config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        .bg-gradient-to-r {
+          background-image: linear-gradient(to right, var(--tw-gradient-stops));
+        }
+        .from-red-500 {
+          --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
+          --tw-gradient-from-position: ;
+          --tw-gradient-to: #ef444400 var(--tw-gradient-from-position);
+          --tw-gradient-to-position: ;
+          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+        }
+        .from-10\% {
+          --tw-gradient-from-position: 10%;
+        }
+        .from-\[11\%\] {
+          --tw-gradient-from-position: 11%;
+        }
+        .via-pink-500 {
+          --tw-gradient-via-position: ;
+          --tw-gradient-to: #ec489900 var(--tw-gradient-to-position);
+          --tw-gradient-to-position: ;
+          --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position),
+            var(--tw-gradient-to);
+        }
+        .via-20\% {
+          --tw-gradient-via-position: 20%;
+        }
+        .via-\[12\%\] {
+          --tw-gradient-via-position: 12%;
+        }
+        .to-violet-400 {
+          --tw-gradient-to: #a78bfa var(--tw-gradient-to-position);
+          --tw-gradient-to-position: ;
+        }
+        .to-30\% {
+          --tw-gradient-to-position: 30%;
+        }
+        .to-\[13\%\] {
+          --tw-gradient-to-position: 13%;
+        }
+      `)
+    })
+  })
 })