diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
index 2c861d01d..28ea90b57 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
@@ -32,8 +32,7 @@
                                      :selected (= editing-stop offset))
                 :data-value (str offset)
                 :on-click on-select-stop
-                :style {:left (dm/str (* offset 100) "%")
-                        :backgroundColor hex}
+                :style {:left (dm/str (* offset 100) "%")}
                 :key (dm/str offset)}
 
        [:div {:class (stl/css :gradient-stop-color)
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index a9b4107ee..0fe9529f2 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -32,22 +32,31 @@
 
 .gradient-stop-wrapper {
   position: absolute;
-  width: calc(100% - 2rem);
+  width: calc(100% - $s-40);
+  left: $s-20;
 }
 
 .gradient-stop {
   position: absolute;
   display: grid;
   grid-template-columns: 50% 50%;
+  padding: 0;
   width: $s-16;
   height: $s-24;
   border-radius: $br-4;
   margin-top: calc(-1 * $s-2);
   margin-left: calc(-1 * $s-8);
   border: $s-2 solid var(--colorpicker-handlers-color);
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-    left center;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=");
+  background-position: left center;
+  background-size: 8px;
   &.selected {
     border: $s-2 solid var(--colorpicker-details-color-selected);
   }
 }
+
+.gradient-stop-color,
+.gradient-stop-alpha {
+  width: 100%;
+  height: 100%;
+}