diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index ac538de7ce911c..7b3d3faea6117e 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -77,7 +77,7 @@
 	}
 
 	@if $direction == "bottom" {
-		background: linear-gradient(to top, rgba($color, 0), $color 90%);
+		background: linear-gradient(to top, transparent, $color 90%);
 		left: $edge;
 		right: $edge;
 		top: $edge;
@@ -86,7 +86,7 @@
 	}
 
 	@if $direction == "top" {
-		background: linear-gradient(to bottom, rgba($color, 0), $color 90%);
+		background: linear-gradient(to bottom, transparent, $color 90%);
 		top: calc(100% - $size);
 		left: $edge;
 		right: $edge;
@@ -95,7 +95,7 @@
 	}
 
 	@if $direction == "left" {
-		background: linear-gradient(to left, rgba($color, 0), $color 90%);
+		background: linear-gradient(to left, transparent, $color 90%);
 		top: $edge;
 		left: $edge;
 		bottom: $edge;
@@ -105,7 +105,7 @@
 	}
 
 	@if $direction == "right" {
-		background: linear-gradient(to right, rgba($color, 0), $color 90%);
+		background: linear-gradient(to right, transparent, $color 90%);
 		top: $edge;
 		bottom: $edge;
 		right: $edge;