diff --git a/Shared/Player/Controls/PlayerControls.swift b/Shared/Player/Controls/PlayerControls.swift
index 56a4d33a..3bda8576 100644
--- a/Shared/Player/Controls/PlayerControls.swift
+++ b/Shared/Player/Controls/PlayerControls.swift
@@ -213,15 +213,25 @@ struct PlayerControls: View {
     }
 
     @ViewBuilder var controlsBackground: some View {
-        if player.musicMode,
-           let url = controlsBackgroundURL
-        {
-            ThumbnailView(url: url)
-                .frame(maxWidth: .infinity, maxHeight: .infinity)
-                .transition(.opacity)
-                .animation(.default)
-        } else if player.videoForDisplay == nil {
-            Color.black
+        ZStack {
+            if player.musicMode,
+               let url = controlsBackgroundURL
+            {
+                ThumbnailView(url: url)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    .transition(.opacity)
+                    .animation(.default)
+            } else if player.videoForDisplay == nil {
+                Color.black
+            }
+
+            if model.presentingControls {
+                Rectangle()
+                    .fill(
+                        LinearGradient(stops: gradientStops, startPoint: .top, endPoint: .bottom)
+                    )
+                    .transition(.opacity)
+            }
         }
     }
 
@@ -235,6 +245,15 @@ struct PlayerControls: View {
         return nil
     }
 
+    var gradientStops: [Gradient.Stop] {
+        [
+            Gradient.Stop(color: .black.opacity(0.3), location: 0.0),
+            Gradient.Stop(color: .clear, location: 0.33),
+            Gradient.Stop(color: .clear, location: 0.66),
+            Gradient.Stop(color: .black.opacity(0.3), location: 1)
+        ]
+    }
+
     var timeline: some View {
         TimelineView(context: .player).foregroundColor(.primary)
     }