diff --git a/client/public/stylesheets/style/style.css b/client/public/stylesheets/style/style.css
index 08b8350d..a2b19cc1 100644
--- a/client/public/stylesheets/style/style.css
+++ b/client/public/stylesheets/style/style.css
@@ -530,7 +530,7 @@ nav.ol-panel> :last-child {
 }
 
 .active .ol-slider::-webkit-slider-thumb {
-    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, color-mix(in srgb, var(--accent-light-blue), transparent 66%) 50%);
+    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, var(--transparent-accent-light-blue) 50%);
 }
 
 .ol-slider::-moz-range-thumb {
@@ -545,7 +545,7 @@ nav.ol-panel> :last-child {
 
 .active .ol-slider::-moz-range-thumb {
     -moz-appearance: none;
-    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, color-mix(in srgb, var(--accent-light-blue), transparent 66%) 50%);
+    background: radial-gradient(circle at center, var(--accent-light-blue), var(--accent-light-blue) 40%, var(--transparent-accent-light-blue) 50%);
 }
 
 .ol-slider-min-max {
diff --git a/client/public/themes/olympus/theme.css b/client/public/themes/olympus/theme.css
index f816c274..520d6927 100644
--- a/client/public/themes/olympus/theme.css
+++ b/client/public/themes/olympus/theme.css
@@ -22,6 +22,7 @@
     /*** UI Colours **/
     --accent-green: #8bff63;
     --accent-light-blue: #5ca7ff;
+    --transparent-accent-light-blue: rgba(92, 167, 255, .33);
     --accent-light-red: #F5B6B6;
 
     --background-grey: #3d4651;