Add more knob optimization

index.html

@@ -42,9 +42,12 @@
                 <div class="slider">
                     <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
                     <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
+                    <div class="knob-container">
                         <div class="knob" id="range-knob">
                             <div class="knotch" id="range-knotch"></div>
                         </div>
+                        <div class="knob-shadow"></div>
+                    </div>
                 </div>
 
                 <div class="background-col-picker">

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%;
+    }
   }