diff --git a/index.html b/index.html
index 0eca18c8..97e49720 100644
--- a/index.html
+++ b/index.html
@@ -531,6 +531,9 @@ <h1>Gradient Text</h1>
               <div class="btn" data-button="gradient-text">Get Results</div>
             </div>
           </div>
+          <div id="error-message" class="error-message">
+            Please fill in all color inputs.
+          </div>
           <!-- End of Gradient Text -->
 
           <!-- Gradient Border -->
diff --git a/src/pages/gradient-text.ts b/src/pages/gradient-text.ts
index 2e091627..1e84dfff 100644
--- a/src/pages/gradient-text.ts
+++ b/src/pages/gradient-text.ts
@@ -96,6 +96,27 @@ export function gradientTextGenerator(
 
   const getInputElement = getInputText(attribute);
 
+  // Check if any of the color inputs is empty
+  let colorInputsEmpty = false;
+  for (const input of gradientTextInputs) {
+    if (input.id.startsWith('gradient-text-color') && input.value === '') {
+      colorInputsEmpty = true;
+      break;
+    }
+  }
+  if (colorInputsEmpty) {
+    // Show an error message on the screen
+    const errorMessageElement = document.getElementById('error-message');
+    errorMessageElement.textContent = 'Please fill in all color inputs.';
+    errorMessageElement.style.display = 'block';
+
+    // Prevent further action
+    setTimeout(() => {
+      errorMessageElement.style.display = 'none';
+    }, 3000); // 5000 milliseconds (5 seconds)
+    return;
+  }
+
   if (getInputElement.value.length === 0) {
     getOpenSideBarButton().style.display = 'none';
     triggerEmptyAnimation(getInputElement);
diff --git a/src/style.css b/src/style.css
index 23b38da2..491da866 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1313,6 +1313,15 @@ a {
   }
 }
 
+.error-message {
+  /* background-color: rgb(15, 9, 9); */
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  text-align: center;
+  margin-top: 20px;
+}
+
 @media screen and (max-width: 500px) {
   .box-shadow-preview {
     --box-size: 70px;