diff --git a/dribbblish-dynamic.js b/dribbblish-dynamic.js
index 67c45e9..170fc29 100644
--- a/dribbblish-dynamic.js
+++ b/dribbblish-dynamic.js
@@ -210,7 +210,7 @@ function toggleDark(setDark) {
     setRootColor('subtext', setDark ? "#EAEAEA" : "#3D3D3D")
     setRootColor('notification', setDark ? "#303030" : "#DDDDDD")
 
-    updateColors(textColor, sidebarColor, false)
+    updateColors(textColor, sidebarColor)
 }
 
 function checkDarkLightMode() {
@@ -285,65 +285,20 @@ var currentColor;
 var currentSideColor;
 var colorFadeInterval = false;
 
-function updateColors(textColHex, sideColHex, animate=false) {
-    let update = (textColHex, sideColHex) => {
-        currentColor = textColHex;
-        currentSideColor = sideColHex;
+function updateColors(textColHex, sideColHex) {
+    let isLightBg = isLight(textColorBg)
+    if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
 
-        let isLightBg = isLight(textColorBg)
-        if (isLightBg) textColHex = LightenDarkenColor(textColHex, -15) // vibrant color is always too bright for white bg mode
-
-        let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
-        let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
-        let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
-        setRootColor('text', textColHex)
-        setRootColor('button', darkerColHex)
-        setRootColor('button-active', darkColHex)
-        setRootColor('selected-row', darkerColHex)
-        setRootColor('tab-active', buttonBgColHex)
-        setRootColor('button-disabled', buttonBgColHex)
-        setRootColor('sidebar', sideColHex)
-    };
-
-    clearInterval(colorFadeInterval); // clear any interval that might be running
-
-    if(!animate) {
-        update(textColHex, sideColHex);
-        return;
-    }
-
-    let clamp = (num,min,max) => Math.min(Math.max(num, min), max);
-    let lerp = (a,b,u) => (1-u) * a + u * b;
-    let toMS = s => parseFloat(s) * (/\ds$/.test(s) ? 1000 : 1);
-
-    let interval = 10; // 10 ms between each call
-    var duration = toMS(getComputedStyle(document.documentElement).getPropertyValue("--song-transition-speed"));
-    if(duration < 1) duration = 1;
-    let startC1 = hexToRgb(currentColor);
-    let startC2 = hexToRgb(currentSideColor);
-
-    let endC1 = hexToRgb(textColHex);
-    let endC2 = hexToRgb(sideColHex);
-
-    var start;
-
-    colorFadeInterval = setInterval(function(){
-        if(!start) { start = performance.now() }
-        let elapsed = performance.now()-start;
-        let ratio = clamp(elapsed/duration, 0, 1)
-
-        let currentC1 = [];
-        let currentC2 = [];
-        for(var i = 0; i < 3; i++){
-            currentC1[i] = lerp(startC1[i], endC1[i], ratio);
-            currentC2[i] = lerp(startC2[i], endC2[i], ratio);
-        }
-
-        update(rgbToHex(currentC1), rgbToHex(currentC2));
-
-        if (elapsed>duration){ clearInterval(colorFadeInterval) }
-
-    }, interval);
+    let darkColHex = LightenDarkenColor(textColHex, isLightBg ? 12 : -20)
+    let darkerColHex = LightenDarkenColor(textColHex, isLightBg ? 30 : -40)
+    let buttonBgColHex = setLightness(textColHex, isLightBg ? 0.90 : 0.14)
+    setRootColor('text', textColHex)
+    setRootColor('button', darkerColHex)
+    setRootColor('button-active', darkColHex)
+    setRootColor('selected-row', darkerColHex)
+    setRootColor('tab-active', buttonBgColHex)
+    setRootColor('button-disabled', buttonBgColHex)
+    setRootColor('sidebar', sideColHex)
 }
 
 let nearArtistSpanText = ""
@@ -432,7 +387,7 @@ function pickCoverColor(img) {
             sidebarColor = swatches[lightCols[col]].getHex()
             break
         }
-    updateColors(textColor, sidebarColor, true)
+    updateColors(textColor, sidebarColor)
 }
 
 waitForElement([".main-nowPlayingBar-left"], (queries) => {
diff --git a/user.css b/user.css
index 92e18ae..0a131a7 100644
--- a/user.css
+++ b/user.css
@@ -39,6 +39,37 @@
     font-weight: 500;
 }
 
+
+/* smooth color transitions */
+@property --spice-sidebar {
+  syntax: '<color>';
+  initial-value: magenta;
+  inherits: true;
+}
+
+@property --spice-main {
+  syntax: '<color>';
+  initial-value: magenta;
+  inherits: true;
+}
+
+@property --spice-text {
+  syntax: '<color>';
+  initial-value: magenta;
+  inherits: true;
+}
+
+@property --spice-button {
+  syntax: '<color>';
+  initial-value: magenta;
+  inherits: true;
+}
+
+:root {
+    transition: all var(--song-transition-speed) linear;
+    transition-property: --spice-sidebar, --spice-main, --spice-text, --spice-button;
+}
+
 body {
     --glue-font-family: "Google Sans Display","Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;
     --info-font-family: "Roboto",spotify-circular,spotify-circular-cyrillic,spotify-circular-arabic,spotify-circular-hebrew,Helvetica Neue,helvetica,arial,Hiragino Kaku Gothic Pro,Meiryo,MS Gothic,sans-serif;