diff --git a/packages/colorwind/src/plugin.ts b/packages/colorwind/src/plugin.ts
index eaa8933..ca2b2ea 100644
--- a/packages/colorwind/src/plugin.ts
+++ b/packages/colorwind/src/plugin.ts
@@ -11,32 +11,135 @@ export default function (
   const colors = config.colors;
   const utilities = config.utilities;
 
-  for (const [utilityName, propertyName] of Object.entries(utilities)) {
-    api.addProperty(propertyName, 'var(--color)', utilityName);
+  api.addUtility('from', {
+    '--tw-gradient-from': 'var(--color) var(--tw-gradient-from-position)',
+    '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+    '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
+  });
+  api.addUtility('via', {
+    '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+    '--tw-gradient-stops':
+      'var(--tw-gradient-from), var(--color) var(--tw-gradient-via-position), var(--tw-gradient-to)',
+  });
+  api.addUtility('to', {
+    '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+  });
+
+  for (const [colorName, colorOption] of Object.entries(colors)) {
+    if (typeof colorOption === 'object') {
+      const lightColor = colorOption.light;
+      const darkColor = colorOption.dark;
+      api.addDark(
+        colorName,
+        {
+          '--color': darkColor,
+        },
+        {
+          '--color': lightColor,
+        },
+      );
+      api.addDark(
+        `${colorName}-reverse`,
+        {
+          '--color': lightColor,
+        },
+        {
+          '--color': darkColor,
+        },
+      );
+      api.addDark(
+        `from-${colorName}`,
+        {
+          '--tw-gradient-from': `${darkColor} var(--tw-gradient-from-position)`,
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops':
+            'var(--tw-gradient-from), var(--tw-gradient-to)',
+        },
+        {
+          '--tw-gradient-from': `${lightColor} var(--tw-gradient-from-position)`,
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops':
+            'var(--tw-gradient-from), var(--tw-gradient-to)',
+        },
+      );
+      api.addDark(
+        `from-${colorName}-reverse`,
+        {
+          '--tw-gradient-from': `${lightColor} var(--tw-gradient-from-position)`,
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops':
+            'var(--tw-gradient-from), var(--tw-gradient-to)',
+        },
+        {
+          '--tw-gradient-from': `${darkColor} var(--tw-gradient-from-position)`,
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops':
+            'var(--tw-gradient-from), var(--tw-gradient-to)',
+        },
+      );
+      api.addDark(
+        `via-${colorName}`,
+        {
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops': `var(--tw-gradient-from), ${darkColor} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
+        },
+        {
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops': `var(--tw-gradient-from), ${lightColor} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
+        },
+      );
+      api.addDark(
+        `via-${colorName}-reverse`,
+        {
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops': `var(--tw-gradient-from), ${lightColor} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
+        },
+        {
+          '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+          '--tw-gradient-stops': `var(--tw-gradient-from), ${darkColor} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
+        },
+      );
+      api.addDark(
+        `to-${colorName}`,
+        {
+          '--tw-gradient-to': `${darkColor} var(--tw-gradient-to-position)`,
+        },
+        {
+          '--tw-gradient-to': `${lightColor} var(--tw-gradient-to-position)`,
+        },
+      );
+      api.addDark(
+        `to-${colorName}-reverse`,
+        {
+          '--tw-gradient-to': `${lightColor} var(--tw-gradient-to-position)`,
+        },
+        {
+          '--tw-gradient-to': `${darkColor} var(--tw-gradient-to-position)`,
+        },
+      );
+    } else {
+      api.addProperty('--color', colorOption, colorName);
+      api.addUtility(`--from-${colorName}`, {
+        '--tw-gradient-from': `${colorOption} var(--tw-gradient-from-position)`,
+        '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+        '--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
+      });
+      api.addUtility(`--via-${colorName}`, {
+        '--tw-gradient-to': 'var(--color) var(--tw-gradient-to-position)',
+        '--tw-gradient-stops': `var(--tw-gradient-from), ${colorOption} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
+      });
+      api.addUtility(`to-${colorName}`, {
+        '--tw-gradient-to': `${colorOption} var(--tw-gradient-to-position)`,
+      });
+    }
+
+    for (const [utilityName, propertyName] of Object.entries(utilities)) {
+      api.addProperty(propertyName, 'var(--color)', utilityName);
 
-    for (const [colorName, colorOption] of Object.entries(colors)) {
       const className = `${utilityName}-${colorName}`;
       if (typeof colorOption === 'object') {
         const lightColor = colorOption.light;
         const darkColor = colorOption.dark;
-        api.addDark(
-          colorName,
-          {
-            '--color': darkColor,
-          },
-          {
-            '--color': lightColor,
-          },
-        );
-        api.addDark(
-          `${colorName}-reverse`,
-          {
-            '--color': lightColor,
-          },
-          {
-            '--color': darkColor,
-          },
-        );
         api.addDark(
           className,
           {
@@ -56,7 +159,6 @@ export default function (
           },
         );
       } else {
-        api.addProperty('--color', colorOption, colorName);
         api.addProperty(propertyName, colorOption, className);
       }
     }
diff --git a/website/src/content/docs/guides/index.mdx b/website/src/content/docs/guides/index.mdx
index e20002c..26be159 100644
--- a/website/src/content/docs/guides/index.mdx
+++ b/website/src/content/docs/guides/index.mdx
@@ -171,14 +171,14 @@ With **Colorwind**, you can easily define and apply color utilities that adjust
 <Tabs>
   <TabItem label="Code">
     ```html
-    <section class="bg-gradient-to-t from-indigo-2 to-pink-1 bg-opacity-90 p-10 text-white">
+    <section class="bg-gradient-to-t from-indigo-2 to-pink-1 p-10 text-pure">
       <h1>Section with gradient</h1>
       <p>Example of a section with gradient background colors and opacity.</p>
     </section>
     ```
   </TabItem>
   <TabItem label="Render">
-    <section class="bg-gradient-to-t from-indigo-2 to-pink-1 bg-opacity-90 p-10 text-white">
+    <section class="bg-gradient-to-t from-indigo-2 to-pink-1 p-10 text-pure">
       <h1>Section with gradient</h1>
       <p>Example of a section with gradient background colors and opacity.</p>
     </section>