diff --git a/src/utils/hooks/useColorGradientFromString.ts b/src/utils/hooks/useColorGradientFromString.ts
index 7250acf2..bce55ced 100644
--- a/src/utils/hooks/useColorGradientFromString.ts
+++ b/src/utils/hooks/useColorGradientFromString.ts
@@ -4,16 +4,15 @@ import { useColorFromString } from '~/utils/hooks/useColorFromString';
 import { normalizeBrightColor } from '~/utils/color';
 
 export const useColorGradientFromString = (val?: string, saturation = 3, lightness = 3) => {
-  const color = useColorFromString(val, saturation, lightness);
-  return useMemo(
-    () =>
-      val
-        ? `linear-gradient(155deg, ${color}, ${normalizeBrightColor(
-            adjustHue(color, 80),
-            saturation,
-            lightness
-          )})`
-        : '',
-    [color]
-  );
+  return useMemo(() => {
+    if (!val) {
+      return '';
+    }
+
+    const color = useColorFromString(val, saturation, lightness);
+    const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
+    const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
+
+    return `linear-gradient(155deg, ${color}, ${second}, ${third})`;
+  }, [val]);
 };