diff --git a/src/renderer/index.js b/src/renderer/index.js
index deae283d..2c9ae5c2 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -341,7 +341,7 @@ const app = new Vue({
                     break;
                 case "disabled":
                     document.querySelector("html").style.background = "#222";
-                    document.querySelector("body").style.background = "#222";
+                    // document.querySelector("body").style.background = "#222";
                     break;
             }
         },
@@ -2430,18 +2430,18 @@ const app = new Vue({
                             document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
                             Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
                                 let angle = "140deg"
-                                if(palette.DarkMuted != null && palette.DarkVibrant != null){
-                                    document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.DarkMuted._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
-                                }else if(palette.Muted != null && palette.LightMuted != null){
-                                    document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.Muted._rgb)} 0%, ${self._rgbToRgb(palette.LightMuted._rgb)} 100%)`
-                                }else if(palette.Vibrant != null && palette.DarkVibrant != null){
-                                    document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(palette.Vibrant._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
-                                }else{
-                                    let colors = Object.values(palette).filter(color=>color!=null)
-                                    if(colors.length > 0){
-                                        document.querySelector("#app").style.backgroundImage = `linear-gradient(${angle}, ${self._rgbToRgb(colors[0]._rgb)} 0%, ${self._rgbToRgb(colors[1]._rgb)} 100%)`
-                                    }
+                                let gradient = ""
+                                let colors = Object.values(palette).filter(color=>color!=null)
+                                if(colors.length > 0){
+                                    let stops = []
+                                    colors.forEach(color=>{
+                                        stops.push(`${self._rgbToRgb(color._rgb)} 0%`)
+                                    })
+                                    stops.push(`${self._rgbToRgb(colors[0]._rgb)} 100%`)
+                                    gradient = `linear-gradient(${angle}, ${stops.join(", ")}`
                                 }
+
+                                document.querySelector("#app").style.setProperty("--bgColor", gradient)
                             }).setQuantizer(Vibrant.Quantizer.WebWorker)
 
                             try {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 8dc3b457..21792107 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -88,6 +88,7 @@ body[platform='linux'] {
 #app {
   --color1: rgba(30, 30, 30, 30%);
   --color2: rgba(15, 15, 15, 30%);
+  --bgColor: transparent;
   --chromeHeight: 55px;
   width: 100%;
   height: 100%;
@@ -98,13 +99,30 @@ body[platform='linux'] {
   position: relative;
   overflow: hidden;
   background-size: 400% 400%;
-  animation: bgGradient 10s ease infinite;
 }
 
-@keyframes bgGradient {
-  0%{background-position:0% 50%}
-  50%{background-position:100% 50%}
-  100%{background-position:0% 50%}
+#app::before {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 250%;
+  background-image: var(--bgColor);
+  content: "";
+  z-index: -1;
+  transform: rotateZ(0deg);
+  transform-origin: center;
+  animation: bgRotate 10s linear infinite;
+  filter: brightness(300%) saturate(300%) contrast(1.5);
+}
+
+@keyframes bgRotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
 }
 
 [hidden] {
@@ -153,6 +171,7 @@ input[type="text"], input[type="number"] {
   transition: opacity .25s var(--appleEase);
   pointer-events: none;
   transform: translateZ(0px);
+  display: none;
 }