diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
index 4aaaca6e98..221e2c4f43 100644
--- a/packages/preset-wind/src/rules/background.ts
+++ b/packages/preset-wind/src/rules/background.ts
@@ -1,7 +1,25 @@
-import type { Rule, RuleContext } from '@unocss/core'
+import type { CSSColorValue, Rule, RuleContext } from '@unocss/core'
 import { colorOpacityToString, colorToString, handler as h, parseColor, positionMap } from '@unocss/preset-mini/utils'
 import type { Theme } from '@unocss/preset-mini'
 
+const bgGradientToValue = (cssColor: CSSColorValue | undefined) => {
+  if (cssColor)
+    return colorToString(cssColor, 0)
+
+  return 'rgba(255,255,255,0)'
+}
+
+const bgGradientColorValue = (mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) => {
+  if (cssColor) {
+    if (alpha != null)
+      return colorToString(cssColor, alpha)
+    else
+      return colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`)
+  }
+
+  return colorToString(color, alpha)
+}
+
 const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') =>
   ([, body]: string[], { theme }: RuleContext<Theme>) => {
     const data = parseColor(body, theme)
@@ -14,23 +32,19 @@ const bgGradientColorResolver = (mode: 'from' | 'to' | 'via') =>
     if (!color)
       return
 
-    let colorString = color
-    if (cssColor) {
-      if (alpha != null)
-        colorString = colorToString(cssColor, alpha)
-      else
-        colorString = colorToString(cssColor, `var(--un-${mode}-opacity, ${colorOpacityToString(cssColor)})`)
-    }
+    const colorString = bgGradientColorValue(mode, cssColor, color, alpha)
 
     switch (mode) {
       case 'from':
         return {
           '--un-gradient-from': colorString,
-          '--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0))',
+          '--un-gradient-to': bgGradientToValue(cssColor),
+          '--un-gradient-stops': 'var(--un-gradient-from), var(--un-gradient-to)',
         }
       case 'via':
         return {
-          '--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to, rgba(255, 255, 255, 0))`,
+          '--un-gradient-to': bgGradientToValue(cssColor),
+          '--un-gradient-stops': `var(--un-gradient-from), ${colorString}, var(--un-gradient-to)`,
         }
       case 'to':
         return {
diff --git a/test/__snapshots__/preset-attributify.test.ts.snap b/test/__snapshots__/preset-attributify.test.ts.snap
index c4b6e520c6..e6be1382e9 100644
--- a/test/__snapshots__/preset-attributify.test.ts.snap
+++ b/test/__snapshots__/preset-attributify.test.ts.snap
@@ -274,9 +274,9 @@ exports[`attributify > fixture2 1`] = `
 [peer=\\"\\"]:focus~[peer-focus~=\\"scale-75\\"],
 [peer=\\"\\"]:not(:placeholder-shown)~[peer-not-placeholder-shown~=\\"scale-75\\"]{--un-scale-x:0.75;--un-scale-y:0.75;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
 [select-none=\\"\\"]{user-select:none;}
-[bg-gradient~=\\"from-yellow-400\\"]{--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1));--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
+[bg-gradient~=\\"from-yellow-400\\"]{--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1));--un-gradient-to:rgba(250,204,21,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
 [bg-gradient~=\\"to-pink-500\\"]{--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1));}
-[bg-gradient~=\\"via-red-500\\"]{--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to, rgba(255, 255, 255, 0));}
+[bg-gradient~=\\"via-red-500\\"]{--un-gradient-to:rgba(239,68,68,0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to);}
 [bg-gradient~=\\"to-r\\"]{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
 [p-10=\\"\\"]{padding:2.5rem;}
 [px-4=\\"\\"]{padding-left:1rem;padding-right:1rem;}
diff --git a/test/__snapshots__/preset-wind.test.ts.snap b/test/__snapshots__/preset-wind.test.ts.snap
index 321939a220..0bd07b4693 100644
--- a/test/__snapshots__/preset-wind.test.ts.snap
+++ b/test/__snapshots__/preset-wind.test.ts.snap
@@ -202,14 +202,14 @@ exports[`preset-wind > targets 1`] = `
 .bg-gradient-stops-\\\\[blue\\\\,pink\\\\],
 .stops-\\\\[blue\\\\,pink\\\\]{--un-gradient-stops:blue,pink;}
 .bg-gradient-from-current,
-.from-current{--un-gradient-from:currentColor;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
+.from-current{--un-gradient-from:currentColor;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.bg-gradient-from-green-600{--un-gradient-from:rgba(22,163,74,var(--un-from-opacity, 1));--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.bg-gradient-from-green-600\\\\/60{--un-gradient-from:rgba(22,163,74,0.6);--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
 .bg-gradient-from-transparent,
-.from-transparent{--un-gradient-from:transparent;--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.from-\\\\$bg-from{--un-gradient-from:var(--bg-from);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.from-green-500{--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1));--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.from-green-500\\\\/50{--un-gradient-from:rgba(34,197,94,0.5);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to, rgba(255, 255, 255, 0));}
+.from-transparent{--un-gradient-from:transparent;--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.from-\\\\$bg-from{--un-gradient-from:var(--bg-from);--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.from-green-500{--un-gradient-from:rgba(34,197,94,var(--un-from-opacity, 1));--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
+.from-green-500\\\\/50{--un-gradient-from:rgba(34,197,94,0.5);--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
 .bg-gradient-to-current,
 .to-current{--un-gradient-to:currentColor;}
 .bg-gradient-to-green-600{--un-gradient-to:rgba(22,163,74,var(--un-to-opacity, 1));}
@@ -220,14 +220,14 @@ exports[`preset-wind > targets 1`] = `
 .to-green-500{--un-gradient-to:rgba(34,197,94,var(--un-to-opacity, 1));}
 .to-green-500\\\\/50{--un-gradient-to:rgba(34,197,94,0.5);}
 .bg-gradient-via-current,
-.via-current{--un-gradient-stops:var(--un-gradient-from), currentColor, var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.bg-gradient-via-green-600{--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.bg-gradient-via-green-600\\\\/40{--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to, rgba(255, 255, 255, 0));}
+.via-current{--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), currentColor, var(--un-gradient-to);}
+.bg-gradient-via-green-600{--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,var(--un-via-opacity, 1)), var(--un-gradient-to);}
+.bg-gradient-via-green-600\\\\/40{--un-gradient-to:rgba(22,163,74,0);--un-gradient-stops:var(--un-gradient-from), rgba(22,163,74,0.4), var(--un-gradient-to);}
 .bg-gradient-via-transparent,
-.via-transparent{--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.via-\\\\$bg-via{--un-gradient-stops:var(--un-gradient-from), var(--bg-via), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.via-green-500{--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,var(--un-via-opacity, 1)), var(--un-gradient-to, rgba(255, 255, 255, 0));}
-.via-green-500\\\\/30{--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3), var(--un-gradient-to, rgba(255, 255, 255, 0));}
+.via-transparent{--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), transparent, var(--un-gradient-to);}
+.via-\\\\$bg-via{--un-gradient-to:rgba(255,255,255,0);--un-gradient-stops:var(--un-gradient-from), var(--bg-via), var(--un-gradient-to);}
+.via-green-500{--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,var(--un-via-opacity, 1)), var(--un-gradient-to);}
+.via-green-500\\\\/30{--un-gradient-to:rgba(34,197,94,0);--un-gradient-stops:var(--un-gradient-from), rgba(34,197,94,0.3), var(--un-gradient-to);}
 .bg-gradient-via-opacity-40{--un-via-opacity:0.4;}
 .via-opacity-30{--un-via-opacity:0.3;}
 .bg-gradient-linear{background-image:linear-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))));}