diff --git a/public/images/player-controls-gradient.png b/public/images/player-controls-gradient.png
new file mode 100644
index 00000000..28548376
Binary files /dev/null and b/public/images/player-controls-gradient.png differ
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index 8fd8a660..da476e9c 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/src/features/MultiSourcePlayer/index.tsx
@@ -12,6 +12,7 @@ import {
   Backward,
   Forward,
   PlaybackTime,
+  ControlsGradient,
 } from 'features/StreamPlayer/styled'
 import { VideoPlayer } from 'features/VideoPlayer'
 
@@ -202,6 +203,7 @@ export const MultiSourcePlayer = (props: Props) => {
           </ControlsGroup>
         </ControlsRow>
       </Controls>
+      <ControlsGradient />
     </PlayerWrapper>
   )
 }
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index 1ae9365d..f55a48a2 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -21,6 +21,7 @@ import {
   Backward,
   Forward,
   PlaybackTime,
+  ControlsGradient,
 } from './styled'
 
 export const StreamPlayer = (props: Props) => {
@@ -136,6 +137,7 @@ export const StreamPlayer = (props: Props) => {
           </ControlsGroup>
         </ControlsRow>
       </Controls>
+      <ControlsGradient />
     </PlayerWrapper>
   )
 }
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 74f678ff..d7078027 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -10,7 +10,17 @@ export const VideoPlayer = styled(VideoPlayerBase)`
   left: 0;
 `
 
+export const ControlsGradient = styled.div`
+  background-image: url(/images/player-controls-gradient.png);
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+  height: 145px;
+`
+
 export const Controls = styled.div`
+  z-index: 50;
   position: absolute;
   width: 100%;
   bottom: 22px;