diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 9009b0d..d6d9754 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -124,7 +124,8 @@
         #ffd0d0 2%
       );
     &[data-channel='alpha'] {
-      background: linear-gradient(to right, var(--stops));
+      background: linear-gradient(to right, var(--stops)),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');
     }
   }
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e5a006e..e1f77d5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -28,11 +28,13 @@ export const sliderGradient = ({
   const start = clone(color);
   const end = clone(color);
   if (channel === 'alpha') {
-    start.alpha = range[0];
-    end.alpha = range[1];
+    start.alpha = 0;
+    end.alpha = 1;
   } else {
     set(start, channel, range[0]);
+    start.alpha = 1;
     set(end, channel, range[1]);
+    end.alpha = 1;
   }
 
   const gradientSteps = steps(start, end, {