diff --git a/app/javascript/styles/mastodon-light/css_variables.scss b/app/javascript/styles/mastodon-light/css_variables.scss
index eb92cfb0f5..47bb90ea86 100644
--- a/app/javascript/styles/mastodon-light/css_variables.scss
+++ b/app/javascript/styles/mastodon-light/css_variables.scss
@@ -75,7 +75,12 @@
   --clr-bg-ambient: var(--clr-bg-primary);
   --clr-bg-elevated: var(--clr-bg-primary);
   --clr-bg-inverted: var(--clr-grey-950);
-  --clr-bg-media: var(--clr-black);
+  --clr-bg-media-base: var(--clr-black);
+  --clr-bg-media-strength: 65%;
+  --clr-bg-media: #{utils.css-alpha(
+      var(--clr-bg-media-base),
+      var(--clr-bg-media-strength)
+    )};
   --clr-bg-overlay: var(--clr-bg-primary);
   --clr-bg-disabled: var(--clr-grey-400);
   --clr-bg-accent-subtle-base: var(--clr-indigo-600);
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index f3edcceeb2..ed660f78db 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -2064,10 +2064,10 @@ a.sparkline {
       top: 5px;
       right: 5px;
       color: var(--clr-text-on-media);
-      border: 0;
-      outline: 1px solid var(--clr-border-media);
-      background-color: rgb(from var(--clr-bg-media) r g b / 45%);
+      background: var(--clr-bg-media);
       backdrop-filter: $backdrop-blur-filter;
+      outline: 1px solid var(--clr-border-media);
+      border: 0;
       padding: 3px 12px;
       border-radius: 99px;
       font-size: 14px;
@@ -2076,7 +2076,7 @@ a.sparkline {
 
       &:hover,
       &:focus {
-        background-color: rgb(from var(--clr-bg-media) r g b / 90%);
+        background-color: rgb(from var(--clr-bg-media-base) r g b / 90%);
       }
     }
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 69a892fbc7..4c8bf80f47 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -339,9 +339,9 @@
 
   &.overlayed {
     --default-icon-color: rgb(from var(--clr-text-on-media) r g b / 70%);
-    --default-bg-color: rgb(from var(--clr-bg-media) r g b / 65%);
+    --default-bg-color: var(--clr-bg-media);
     --hover-icon-color: var(--clr-text-accent);
-    --hover-bg-color: rgb(from var(--clr-bg-media) r g b / 90%);
+    --hover-bg-color: rgb(from var(--clr-bg-media-base) r g b / 90%);
 
     box-sizing: content-box;
     backdrop-filter: $backdrop-blur-filter;
@@ -697,7 +697,7 @@ body > [data-popper-placement] {
     .icon-button {
       flex: 0 0 auto;
       color: var(--clr-text-on-media);
-      background: rgb(from var(--clr-bg-media) r g b / 65%);
+      background: var(--clr-bg-media);
       backdrop-filter: $backdrop-blur-filter;
       border-radius: 6px;
       font-size: 12px;
@@ -4887,7 +4887,7 @@ a.status-card {
     font-size: 14px;
 
     &__label {
-      background-color: rgb(from var(--clr-bg-media) r g b / 65%);
+      background-color: var(--clr-bg-media);
       backdrop-filter: $backdrop-blur-filter;
       border-radius: 8px;
       padding: 12px 16px;
@@ -4907,7 +4907,7 @@ a.status-card {
     &:hover,
     &:focus {
       .spoiler-button__overlay__label {
-        background-color: rgb(from var(--clr-bg-media) r g b / 90%);
+        background-color: rgb(from var(--clr-bg-media-base) r g b / 90%);
       }
     }
   }
@@ -6923,9 +6923,9 @@ a.status-card {
   &__pill {
     display: block;
     color: var(--clr-text-on-media);
-    border: 0;
-    background: rgb(from var(--clr-bg-media) r g b / 65%);
+    background: var(--clr-bg-media);
     backdrop-filter: $backdrop-blur-filter;
+    border: 0;
     padding: 3px 12px;
     border-radius: 99px;
     font-size: 14px;
@@ -6948,9 +6948,9 @@ a.status-card {
   display: block;
   text-align: center;
   color: var(--clr-text-on-media);
-  border: 0;
-  background: rgb(from var(--clr-bg-media) r g b / 65%);
+  background: var(--clr-bg-media);
   backdrop-filter: $backdrop-blur-filter;
+  border: 0;
   padding: 3px 8px;
   border-radius: 4px;
   font-size: 12px;
@@ -6972,7 +6972,7 @@ a.status-card {
 
 .info-tooltip {
   color: var(--clr-text-on-media);
-  background: rgb(from var(--clr-bg-media) r g b / 65%);
+  background: var(--clr-bg-media);
   backdrop-filter: $backdrop-blur-filter;
   border-radius: 4px;
   box-shadow: var(--dropdown-shadow);
@@ -7190,7 +7190,7 @@ a.status-card {
 
     .icon {
       color: var(--clr-text-on-media);
-      filter: drop-shadow(0 0 6px var(--clr-bg-media));
+      filter: drop-shadow(0 0 6px var(--clr-bg-media-base));
     }
   }
 
@@ -7448,8 +7448,8 @@ a.status-card {
     box-sizing: border-box;
     background: linear-gradient(
       0deg,
-      rgb(from var(--clr-bg-media) r g b / 85%) 0,
-      rgb(from var(--clr-bg-media) r g b / 45%) 60%,
+      rgb(from var(--clr-bg-media-base) r g b / 85%) 0,
+      rgb(from var(--clr-bg-media-base) r g b / 45%) 60%,
       transparent
     );
     padding: 0 15px;
@@ -7731,9 +7731,9 @@ a.status-card {
     top: 50%;
     inset-inline-start: 50%;
     transform: translate(-50%, -50%);
-    background: rgb(from var(--clr-bg-media) r g b / 45%);
-    backdrop-filter: $backdrop-blur-filter;
     color: var(--clr-text-on-media);
+    background: var(--clr-bg-media);
+    backdrop-filter: $backdrop-blur-filter;
     border-radius: 8px;
     padding: 16px 24px;
     display: flex;
diff --git a/app/javascript/styles/mastodon/css_variables.scss b/app/javascript/styles/mastodon/css_variables.scss
index 7f0c84d025..407a66c58b 100644
--- a/app/javascript/styles/mastodon/css_variables.scss
+++ b/app/javascript/styles/mastodon/css_variables.scss
@@ -85,7 +85,12 @@
   --clr-bg-ambient: var(--clr-bg-primary);
   --clr-bg-elevated: var(--clr-grey-800);
   --clr-bg-inverted: var(--clr-grey-50);
-  --clr-bg-media: var(--clr-black);
+  --clr-bg-media-base: var(--clr-black);
+  --clr-bg-media-strength: 65%;
+  --clr-bg-media: #{utils.css-alpha(
+      var(--clr-bg-media-base),
+      var(--clr-bg-media-strength)
+    )};
   --clr-bg-overlay: var(--clr-bg-primary);
   --clr-bg-disabled: var(--clr-grey-700);
   --clr-bg-accent-subtle-base: var(--clr-indigo-400);