diff --git a/gtk-3.0/_drawing.scss b/gtk-3.0/_drawing.scss
index be5f788..e1d5366 100755
--- a/gtk-3.0/_drawing.scss
+++ b/gtk-3.0/_drawing.scss
@@ -593,3 +593,7 @@ box-shadow: none;
   border: none;
   box-shadow: none;
 }
+
+@mixin scale-highlight($dir) {
+  background: linear-gradient(to $dir, #00f17d, #00f7d2);
+}
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
index 2ba9ef8..feae643 100755
--- a/gtk-3.0/gtk-dark.css
+++ b/gtk-3.0/gtk-dark.css
@@ -3310,7 +3310,8 @@ progressbar {
   progressbar.horizontal progress {
     margin: 0; }
   progressbar.vertical progress {
-    margin: 0; }
+    margin: 0;
+    background: linear-gradient(to bottom, #00f17d, #00f7d2); }
   progressbar:backdrop {
     box-shadow: none;
     transition: 200ms ease-out; }
@@ -3367,6 +3368,8 @@ scale {
   scale.vertical trough,
   scale.vertical progress {
     min-width: 6px; }
+  scale.vertical highlight {
+    background: linear-gradient(to bottom, #00f17d, #00f7d2); }
   scale slider {
     min-height: 15px;
     min-width: 15px;
diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
index 2b2ecf0..0657e39 100755
--- a/gtk-3.0/gtk.css
+++ b/gtk-3.0/gtk.css
@@ -3317,7 +3317,8 @@ progressbar {
   progressbar.horizontal progress {
     margin: 0; }
   progressbar.vertical progress {
-    margin: 0; }
+    margin: 0;
+    background: linear-gradient(to bottom, #00f17d, #00f7d2); }
   progressbar:backdrop {
     box-shadow: none;
     transition: 200ms ease-out; }
@@ -3374,6 +3375,8 @@ scale {
   scale.vertical trough,
   scale.vertical progress {
     min-width: 6px; }
+  scale.vertical highlight {
+    background: linear-gradient(to bottom, #00f17d, #00f7d2); }
   scale slider {
     min-height: 15px;
     min-width: 15px;
diff --git a/gtk-3.0/widgets/_progress-bars.scss b/gtk-3.0/widgets/_progress-bars.scss
index c962fdc..2a872f1 100644
--- a/gtk-3.0/widgets/_progress-bars.scss
+++ b/gtk-3.0/widgets/_progress-bars.scss
@@ -13,8 +13,8 @@ progressbar {
     progress { min-width: 6px; }
   }
 
-  &.horizontal progress { margin: 0; } // the progress node is positioned after the trough border
-  &.vertical progress { margin: 0; }   // this moves it over it.
+  &.horizontal progress { margin: 0;} // the progress node is positioned after the trough border
+  &.vertical progress { margin: 0; @include scale-highlight(bottom);}   // this moves it over it.
 
 
   // FIXME: insensitive state missing and some other state should be set probably
diff --git a/gtk-3.0/widgets/_scales.scss b/gtk-3.0/widgets/_scales.scss
index dfe55fb..3352713 100644
--- a/gtk-3.0/widgets/_scales.scss
+++ b/gtk-3.0/widgets/_scales.scss
@@ -19,7 +19,7 @@
 
 %scale_highlight {
   border: none;
-  background: linear-gradient(to right, #00f17d, #00f7d2);
+  @include scale-highlight(right);
   border-radius: 3px;
   margin: 0;
 
@@ -54,7 +54,8 @@ scale {
 
   &.vertical {
     trough,
-    progress { min-width: 6px; }
+    progress { min-width: 6px;}
+    highlight { @include scale-highlight(bottom); }
   }
 
   // the slider is inside the trough, so to have make it bigger there's a negative margin