--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -18,9 +18,10 @@ const ThemeVariableMap = [
   ["--urlbar-separator-color", "toolbar_field_separator"],
   ["--tabs-border-color", "toolbar_top_separator", "navigator-toolbox"],
   ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
   ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
   ["--lwt-toolbarbutton-icon-fill", "icon_color"],
   ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
   ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
   ["--lwt-toolbarbutton-active-background", "button_background_active"],
+  ["--lwt-selected-tab-background-color", "tab_selected"],
 ];

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -525,23 +525,24 @@ tabbrowser {
 
 /*
  * LightweightThemeConsumer will set the current lightweight theme's header
  * image to the lwt-header-image variable, used in each of the following rulesets.
  */
 
 /* Lightweight theme on tabs */
 :root[lwtheme-image] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true] {
-  background-attachment: scroll, fixed;
+  background-attachment: scroll, scroll, fixed;
   background-color: transparent;
-  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
+  background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
+                    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
                     var(--lwt-header-image);
-  background-position: 0 0, right top;
-  background-repeat: repeat-x, no-repeat;
-  background-size: auto 100%, auto auto;
+  background-position: 0 0, 0 0, right top;
+  background-repeat: repeat-x, repeat-x, no-repeat;
+  background-size: auto 100%, auto 100%, auto auto;
 }
 
 /* Tab hover */
 
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
   background-color: rgba(0,0,0,.1);
 }
 

--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -145,16 +145,17 @@ class Theme {
         case "icons":
           this.lwtStyles.icon_color = cssColor;
           break;
         case "icons_attention":
           this.lwtStyles.icon_attention_color = cssColor;
           break;
         case "tab_loading":
         case "tab_text":
+        case "tab_selected":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
         case "toolbar_field_separator":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
         case "button_background_hover":

--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -64,16 +64,20 @@
               }
             },
             "additionalProperties": { "$ref": "UnrecognizedProperty" }
           },
           "colors": {
             "type": "object",
             "optional": true,
             "properties": {
+              "tab_selected": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "accentcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "frame": {
                 "$ref": "ThemeColor",
                 "optional": true
               },

--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -16,8 +16,9 @@ support-files =
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_loading.js]
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
 [browser_ext_themes_toolbarbutton_colors.js]
 [browser_ext_themes_arrowpanels.js]
+[browser_ext_themes_tab_selected.js]

new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_selected.js
@@ -0,0 +1,48 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the background color of selected tab are applied correctly.
+
+add_task(async function test_tab_background_color_property() {
+  const TAB_BACKGROUND_COLOR = "#9400ff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "tab_selected": TAB_BACKGROUND_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  info("Checking selected tab color");
+
+  let openTab = document.querySelector(".tabbrowser-tab[visuallyselected=true]");
+  let openTabBackground = document.getAnonymousElementByAttribute(openTab, "class", "tab-background");
+
+  let selectedTab = await BrowserTestUtils.openNewForegroundTab(gBrowser, "about:blank");
+  let selectedTabBackground = document.getAnonymousElementByAttribute(selectedTab, "class", "tab-background");
+
+  let openTabGradient = window.getComputedStyle(openTabBackground).getPropertyValue("background-image");
+  let selectedTabGradient = window.getComputedStyle(selectedTabBackground).getPropertyValue("background-image");
+
+  let rgbRegex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/g;
+  let selectedTabColors = selectedTabGradient.match(rgbRegex);
+
+  Assert.equal(selectedTabColors[0], "rgb(" + hexToRGB(TAB_BACKGROUND_COLOR).join(", ") + ")",
+               "Selected tab background color should be set.");
+  Assert.equal(openTabGradient, "none");
+
+  gBrowser.removeTab(selectedTab);
+  await extension.unload();
+});