diff --git a/game.js b/game.js
index 57a917a..658c357 100644
--- a/game.js
+++ b/game.js
@@ -3915,6 +3915,10 @@ function applyGradient() {
 	toggleGradientSelector(); // Close the selector container after applying the gradient
 }
 
+function exitGradient(){
+	toggleGradientSelector()
+}
+
 // Function to display instructions 
 
 document.querySelector('.instructions').addEventListener('click', () => {
diff --git a/index.html b/index.html
index f503b4d..a4d2ea3 100644
--- a/index.html
+++ b/index.html
@@ -190,6 +190,12 @@
         <button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
     </div>
     <div class="gradient-selector-container" id="gradientSelectorContainer">
+        <div>
+            <button onclick="exitGradient()" style="background-color: transparent; border: none; height: 10%; width: 12%; position: absolute; top:1%; right: 7%; color: white; font-size: 40px; text-align: center;">
+                x
+            </button>
+        </div>
+        
         <label for="color1" class="color">Color 1:</label>
         <input type="color" id="color1" name="color1" value="#FFEA7E" class="color_input">
         <label for="color2" class="color">Color 2:</label>