diff --git a/src/components/util/RGBUtils.ts b/src/components/util/RGBUtils.ts
index d329a39f..c273a109 100644
--- a/src/components/util/RGBUtils.ts
+++ b/src/components/util/RGBUtils.ts
@@ -44,8 +44,8 @@ export function getRandomColor() {
 }
 
 export function getAnimFrames(store: typeof defaults) {
+  if (store.colors.length < 2) return { OutputArray: [], frames: [] };
   const colors = store.colors.map(color => ({ rgb: convertToRGB(color.hex), pos: color.pos }));
-  if (colors.length < 2) return { OutputArray: [], frames: [] };
 
   const text = store.text ?? 'Birdflop';
   let loopAmount;
@@ -66,7 +66,28 @@ export function getAnimFrames(store: typeof defaults) {
     const gradient = new AnimatedGradient(colors, length, n);
     let output = '';
     gradient.next();
-    if (store.type == 4) {
+    if (store.format.color == 'MiniMessage') {
+      const colors = sortColors(store.colors);
+      if (colors[0].pos !== 0) colors.unshift({ hex: colors[0].hex, pos: 0 });
+      if (colors[colors.length - 1].pos !== 100) colors.push({ hex: colors[colors.length - 1].hex, pos: 100 });
+      for (let i = 0; i < colors.length - 1; i++) {
+        let currentColor = colors[i];
+        let nextColor = colors[i + 1];
+        if (currentColor.pos > nextColor.pos) {
+          const newColor = currentColor;
+          currentColor = nextColor;
+          nextColor = newColor;
+        }
+
+        const numSteps = text.length;
+        const lowerRange = Math.round(colors[i].pos / 100 * numSteps);
+        const upperRange = Math.round(colors[i + 1].pos / 100 * numSteps);
+        if (lowerRange === upperRange) continue;
+        output += `<gradient:${currentColor.hex}:${nextColor.hex}>${text.substring(lowerRange, upperRange)}</gradient>`;
+      }
+      OutputArray.push(output);
+    }
+    else if (store.type == 4) {
       const hex = convertToHex(gradient.next());
       clrs.push(hex);
       let hexOutput = store.format.color;
diff --git a/src/routes/resources/animtab/index.tsx b/src/routes/resources/animtab/index.tsx
index 1db351b3..f74d3d96 100644
--- a/src/routes/resources/animtab/index.tsx
+++ b/src/routes/resources/animtab/index.tsx
@@ -376,7 +376,7 @@ export default component$(() => {
                 const newColors = store.colors.map(color => ({ hex: getRandomColor(), pos: color.pos }));
                 store.colors = newColors;
               }}>
-                <DiceOutline width={24} />
+                <DiceOutline width={24} class="fill-current" />
               </button>
               <button class="lum-btn lum-pad-xs w-full" disabled={store.colors.find((color, i) => color.pos != (100 / (store.colors.length - 1)) * i) ? false : true} onClick$={() => {
                 const newColors = store.colors.slice(0).map((color, i) => ({ hex: color.hex, pos: (100 / (store.colors.length - 1)) * i }));
@@ -810,7 +810,7 @@ export default component$(() => {
               <label for="formatinput">
                 {t('animtab.outputFormat@@Output Format')}
               </label>
-              <textarea class="lum-input h-32" id="formatinput" value={animtabstore.outputFormat} placeholder="birdflop" onInput$={(e, el) => { animtabstore.outputFormat = el.value; }}/>
+              <textarea class="lum-input h-32 whitespace-pre" id="formatinput" value={animtabstore.outputFormat} placeholder="birdflop" onInput$={(e, el) => { animtabstore.outputFormat = el.value; }}/>
             </div>}
           </div>
         </div>
diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx
index 91f61ceb..f706a077 100644
--- a/src/routes/resources/rgb/index.tsx
+++ b/src/routes/resources/rgb/index.tsx
@@ -346,7 +346,7 @@ export default component$(() => {
                 const newColors = store.colors.map(color => ({ hex: getRandomColor(), pos: color.pos }));
                 store.colors = newColors;
               }}>
-                <DiceOutline width={24} />
+                <DiceOutline width={24} class="fill-current" />
               </button>
               <button class="lum-btn lum-pad-xs w-full" disabled={store.colors.find((color, i) => color.pos != (100 / (store.colors.length - 1)) * i) ? false : true} onClick$={() => {
                 const newColors = store.colors.slice(0).map((color, i) => ({ hex: color.hex, pos: (100 / (store.colors.length - 1)) * i }));