diff --git a/src/components/util/HexUtils.ts b/src/components/util/HexUtils.ts
index 1721051d..6a5b6fd3 100644
--- a/src/components/util/HexUtils.ts
+++ b/src/components/util/HexUtils.ts
@@ -8,14 +8,12 @@ export class Gradient {
   gradients: TwoStopGradient[];
   steps: number;
   step: number;
-  gradient: number;
 
   constructor(colors: Gradient['colors'], numSteps: number) {
     this.colors = colors;
     this.gradients = [];
     this.steps = numSteps - 1;
     this.step = 0;
-    this.gradient = 0;
     if (colors[0].pos !== 0) colors.unshift({ rgb: colors[0].rgb, pos: 0 });
     if (colors[colors.length - 1].pos !== 100) colors.push({ rgb: colors[colors.length - 1].rgb, pos: 100 });
 
@@ -53,12 +51,8 @@ export class Gradient {
       color = this.gradients[0].colorAt(adjustedStep);
     }
     else {
-      const gradient = this.gradients[this.gradient];
+      const gradient = this.gradients.find(g => g.lowerRange <= adjustedStep && g.upperRange >= adjustedStep);
       color = gradient?.colorAt(adjustedStep);
-      if (adjustedStep >= gradient.upperRange) {
-        this.gradient++;
-        if (this.gradient > this.gradients.length) this.gradient = 0;
-      }
     }
 
     this.step++;
diff --git a/src/routes/resources/animtab/index.tsx b/src/routes/resources/animtab/index.tsx
index 058a38c4..d95bfae4 100644
--- a/src/routes/resources/animtab/index.tsx
+++ b/src/routes/resources/animtab/index.tsx
@@ -138,7 +138,8 @@ export default component$(() => {
             onMouseDown$={(e, el) => {
               if (e.target != el) return;
               const rect = el.getBoundingClientRect();
-              const pos = Math.round((e.clientX - rect.left) / rect.width * store.text.length) / store.text.length * 100;
+              const length = store.text.length * store.length;
+              const pos = Math.round((e.clientX - rect.left) / rect.width * length) / length * 100;
               if (store.colors.find(c => c.pos == pos)) return;
               const newColors = [...store.colors];
               newColors.push({ hex: getRandomColor(), pos });
@@ -152,7 +153,8 @@ export default component$(() => {
                   addbutton.classList.add('opacity-0');
                   return;
                 }
-                const pos = Math.round((e.clientX - el.getBoundingClientRect().left) / el.getBoundingClientRect().width * store.text.length) / store.text.length * 100;
+                const length = store.text.length * store.length;
+                const pos = Math.round((e.clientX - el.getBoundingClientRect().left) / el.getBoundingClientRect().width * length) / length * 100;
                 if (store.colors.find(c => c.pos == pos)) return;
                 addbutton.classList.remove('opacity-0');
                 addbutton.style.left = `${pos}%`;
@@ -175,11 +177,14 @@ export default component$(() => {
                 const colormap = document.getElementById('colormap')!;
                 const rect = colormap.getBoundingClientRect();
                 document.addEventListener('mousemove', e => {
-                  let pos = Math.round((((e.clientX - rect.left) / rect.width) * store.text.length)) / store.text.length * 100;
+                  const length = store.text.length * store.length;
+                  let pos = Math.round((((e.clientX - rect.left) / rect.width) * length)) / length * 100;
                   if (pos < 0) pos = 0;
                   if (pos > 100) pos = 100;
                   if (store.colors.find(c => c.pos == pos)) return;
-                  color.pos = pos;
+                  const newColors = [...store.colors];
+                  newColors[i].pos = pos;
+                  store.colors = sortColors(newColors);
                 }, { signal: abortController.signal });
                 document.addEventListener('mouseup', () => {
                   abortController.abort();