diff --git a/src/components/player/base/BottomControls.tsx b/src/components/player/base/BottomControls.tsx
index 61b854a1..009d7f38 100644
--- a/src/components/player/base/BottomControls.tsx
+++ b/src/components/player/base/BottomControls.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 
 import { Transition } from "@/components/utils/Transition";
 import { usePlayerStore } from "@/stores/player/store";
+import { useSubtitleStore } from "@/stores/subtitles";
 
 export function BottomControls(props: {
   show?: boolean;
@@ -10,6 +11,9 @@ export function BottomControls(props: {
   const setHoveringAnyControls = usePlayerStore(
     (s) => s.setHoveringAnyControls,
   );
+  const backgroundBlurEnabled = useSubtitleStore(
+    (s) => s.styling.backgroundBlurEnabled,
+  );
 
   useEffect(() => {
     return () => {
@@ -19,11 +23,13 @@ export function BottomControls(props: {
 
   return (
     <div className="w-full text-white">
-      <Transition
-        animation="fade"
-        show={props.show}
-        className="pointer-events-none flex justify-end pt-32 bg-gradient-to-t from-black to-transparent transition-opacity duration-200 absolute bottom-0 w-full"
-      />
+      {backgroundBlurEnabled && (
+        <Transition
+          animation="fade"
+          show={props.show}
+          className="pointer-events-none flex justify-end pt-32 bg-gradient-to-t from-black to-transparent transition-opacity duration-200 absolute bottom-0 w-full"
+        />
+      )}
       <div
         onMouseOver={() => setHoveringAnyControls(true)}
         onMouseOut={() => setHoveringAnyControls(false)}
diff --git a/src/components/player/base/TopControls.tsx b/src/components/player/base/TopControls.tsx
index 8aa96002..2e688635 100644
--- a/src/components/player/base/TopControls.tsx
+++ b/src/components/player/base/TopControls.tsx
@@ -4,6 +4,7 @@ import { Transition } from "@/components/utils/Transition";
 import { useBannerSize } from "@/stores/banner";
 import { BannerLocation } from "@/stores/banner/BannerLocation";
 import { usePlayerStore } from "@/stores/player/store";
+import { useSubtitleStore } from "@/stores/subtitles";
 
 export function TopControls(props: {
   show?: boolean;
@@ -13,6 +14,9 @@ export function TopControls(props: {
   const setHoveringAnyControls = usePlayerStore(
     (s) => s.setHoveringAnyControls,
   );
+  const backgroundBlurEnabled = useSubtitleStore(
+    (s) => s.styling.backgroundBlurEnabled,
+  );
 
   useEffect(() => {
     return () => {
@@ -22,14 +26,16 @@ export function TopControls(props: {
 
   return (
     <div className="w-full text-white">
-      <Transition
-        animation="fade"
-        show={props.show}
-        style={{
-          top: `${bannerSize}px`,
-        }}
-        className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
-      />
+      {backgroundBlurEnabled && (
+        <Transition
+          animation="fade"
+          show={props.show}
+          style={{
+            top: `${bannerSize}px`,
+          }}
+          className="pointer-events-none flex justify-end pb-32 bg-gradient-to-b from-black to-transparent [margin-bottom:env(safe-area-inset-bottom)] transition-opacity duration-200 absolute top-0 w-full"
+        />
+      )}
       <div className="relative z-10">
         <BannerLocation location="player" />
       </div>