diff --git a/src/app.scss b/src/app.scss
index eefd9dc..32d4fb7 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -125,21 +125,41 @@
 		hsla(303, 100%, 50%, 0.1),
 		hsla(303, 100%, 50%, 0) 25%
 	);
+	--bg-gradient-pink-alt: linear-gradient(
+		to top,
+		var(--accent-pink),
+		hsl(303, 100%, 91%) 100%
+	);
 	--bg-gradient-red: linear-gradient(
 		to bottom,
 		hsla(348, 100%, 50%, 0.1),
 		hsla(348, 100%, 50%, 0) 25%
 	);
+	--bg-gradient-red-alt: linear-gradient(
+		to top,
+		var(--accent-red),
+		hsl(348, 100%, 91%) 100%
+	);
 	--bg-gradient-purple: linear-gradient(
 		to bottom,
 		hsla(264, 100%, 50%, 0.1),
 		hsla(264, 100%, 50%, 0) 25%
 	);
+	--bg-gradient-purple-alt: linear-gradient(
+		to top,
+		var(--accent-purple),
+		hsl(264, 100%, 91%) 100%
+	);
 	--bg-gradient-blue: linear-gradient(
 		to bottom,
 		hsla(220, 100%, 50%, 0.1),
 		hsla(220, 100%, 50%, 0) 25%
 	);
+	--bg-gradient-blue-alt: linear-gradient(
+		to top,
+		var(--accent-blue),
+		hsl(220, 100%, 91%) 100%
+	);
 	--bg-panel: hsl(220, 4%, 18%);
 	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
 	--bg-separator: hsl(220, 4%, 28%);
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte
index 78b2447..2d7466d 100644
--- a/src/routes/convert/+page.svelte
+++ b/src/routes/convert/+page.svelte
@@ -104,7 +104,7 @@
 							/>
 						{:else}
 							<div
-								class="w-full h-full flex items-center justify-center"
+								class="w-full h-full flex items-center justify-center text-black"
 								style="background: var({isAudio
 									? '--bg-gradient-purple-alt'
 									: '--bg-gradient-blue-alt'})"