diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index 8f89ebef5d..13f73dff7c 100644
--- a/src/components/themes/dark/theme.css
+++ b/src/components/themes/dark/theme.css
@@ -19,14 +19,10 @@ html {
     background-color: #101010
 }
 
-.skinHeader.semiTransparent {
+.skinHeader .semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+    background-color: rgba(0, 0, 0, 0.7);
 }
 
 .pageTitleWithDefaultLogo {
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index 3e5809c191..f4d1627425 100644
--- a/src/components/themes/emby/theme.css
+++ b/src/components/themes/emby/theme.css
@@ -19,14 +19,10 @@ html {
     background-color: #1f1f1f
 }
 
-.skinHeader.semiTransparent {
+.skinHeader .semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+    background-color: rgba(0, 0, 0, 0.7);
 }
 
 .pageTitleWithDefaultLogo {
diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css
index ac8c0e040e..5d379db888 100644
--- a/src/components/themes/light/theme.css
+++ b/src/components/themes/light/theme.css
@@ -32,14 +32,10 @@ html {
     box-shadow: none !important
 }
 
-.skinHeader.semiTransparent {
+.skinHeader .semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
+    background-color: rgba(0, 0, 0, 0.7);
 }
 
 .pageTitleWithDefaultLogo {
diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css
index 548eca9804..336a90d58e 100644
--- a/src/components/upnextdialog/upnextdialog.css
+++ b/src/components/upnextdialog/upnextdialog.css
@@ -8,8 +8,7 @@
     flex-direction: column;
     will-change: transform, opacity;
     transition: opacity 300ms ease-out;
-    background-color: rgba(0, 0, 0, .7);
-    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .9));
+    background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     user-select: none;
     -webkit-touch-callout: none;
diff --git a/src/css/videoosd.css b/src/css/videoosd.css
index bd24e41309..61ad459256 100644
--- a/src/css/videoosd.css
+++ b/src/css/videoosd.css
@@ -20,11 +20,7 @@
     transition: opacity .3s ease-out;
     position: relative;
     z-index: 1;
-    background-color: rgba(0, 0, 0, .3) !important;
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0))) !important;
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) !important;
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) !important;
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     color: #eee
@@ -93,7 +89,7 @@
 
 .videoOsdBottom {
     position: fixed;
-    background-color: rgba(0, 0, 0, .7);
+    background-color: rgba(0, 0, 0, 0.7);
     padding: 1%;
     display: -webkit-box;
     display: -webkit-flex;
@@ -103,13 +99,9 @@
     -webkit-flex-direction: row;
     flex-direction: row;
     will-change: opacity;
-    -webkit-transition: opacity .3s ease-out;
-    -o-transition: opacity .3s ease-out;
-    transition: opacity .3s ease-out;
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .8)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
-    background: -o-linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
-    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
+    -webkit-transition: opacity 0.3s ease-out;
+    -o-transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
     color: #fff;
     user-select: none;
     -webkit-touch-callout: none