Add more knob optimization

style.css

@@ -42,7 +42,7 @@ footer {
     opacity: .8;
 }
 
-button, .container, .color-input, .knob {
+button, .container, .color-input {
     box-shadow: 1px 2px 10px 1px #555;
     cursor: pointer;
 }
@@ -120,6 +120,22 @@ button {
     display: none;
 }
 
+.knob-container {
+    position: relative;
+    
+}
+
+.knob-shadow {
+    width: 95px;
+    height: 95px;
+    border-radius: 50%;
+    box-shadow: 1px 2px 10px 1px #555;
+    position: absolute;
+    top: 5%;
+    left: 1%;
+    z-index: -1;
+}
+
 .knob {
     width: 95px;
     height: 95px;
@@ -127,8 +143,10 @@ button {
     cursor: pointer;
     background: #bbb;
     margin-top: 5px;
+    position: relative;
+    z-index: 1;
     transform-style: preserve-3d;
-    will-change: transform, box-shadow;
+    will-change: transform;
 }
 
 .knotch {
@@ -152,8 +170,16 @@ button {
       justify-content: center;
       flex-wrap: wrap;
     }
+
     .knob {
         width: 50px;
         height: 50px;
     }
+
+    .knob-shadow {
+        width: 50px;
+        height: 50px;
+        top: 8%;
+        left: 1%;
+    }
   }