Colorful Tabs

Colorizes tabs by domain.

Ask a question, post a review, or report the script.

Author: Szilard Pasztor
Daily installs: 0
Total installs: 2
Ratings: 0 0 0
Version: 1.0
Created: 2026-03-09
Updated: 2026-03-09
Size: 6.27 KB
License: MIT
Applies to: All sites

Colorful Tabs

Brings back the goo' ol' Colorful Tabs©®™ functionality once available as an extension, but now long gone...
But this time it's a working solution.
Automatically colors Firefox tabs with gradients based on their domain.

⚠️ **Requires userChrome.css** - see installation instructions below

How It Works
Adds invisible Unicode markers to page titles. The userChrome.css detects these markers and applies color gradients.

Installation

### Part 1: Install the script
### Part 2: Setup userChrome.css

1. Open Firefox and type `about:config` in the address bar
2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets`
3. Set it to `true`
4. Type `about:support` in address bar
5. Click "Open Folder" next to Profile Folder
6. Create a `chrome` folder (if it doesn't exist)
7. Create `userChrome.css` file inside the chrome folder
8. Paste in the CSS right below
9. Restart firefox
10. Marvel at the tabs

Paste this CSS into userChrome.css:

#TabsToolbar .tabbrowser-tab .tab-background
{
    border-top: 1px solid #8698aa !important;
    border-left: 1px solid #8698aa !important;
    border-right: 1px solid #8698aa !important;
    padding:0px !important;
    padding-bottom: 3px !important;
}

/* Optional: eliminate padding/margin glitches */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  display: none !important;
}

*|*:root {
 --tab-min-height:      30px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* ============================================
   Tabs - Gradients for each color
   ============================================ */

#TabsToolbar .tabbrowser-tab[label^="\200B"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(0, 80%, 74%, 0.5),
    hsla(0, 80%, 54%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\200C"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(203, 92%, 86%, 0.5),
    hsla(203, 92%, 46%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\200D"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(120, 73%, 85%, 0.5),
    hsla(120, 73%, 45%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\200E"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(51, 100%, 85%, 0.5),
    hsla(51, 100%, 45%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\2060"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(300, 47%, 85%, 0.5),
    hsla(300, 47%, 45%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\180E"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(351, 100%, 96%, 0.5),
    hsla(351, 100%, 56%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\034F"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(187, 92%, 90%, 0.5),
    hsla(187, 92%, 50%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\17B4"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(17, 100%, 84%, 0.5),
    hsla(17, 100%, 44%, 0.5)
  ) !important;
}

#TabsToolbar .tabbrowser-tab[label^="\17B5"] .tab-background {
  background: linear-gradient(
    to bottom,
    hsla(120, 93%, 89%, 0.5),
    hsla(120, 93%, 49%, 0.5)
  ) !important;
}

/* ============================================
   Add subtle border to active tabs
   ============================================ */

#TabsToolbar .tabbrowser-tab[selected] .tab-background {
  background: linear-gradient(
    to bottom,
    #ffffff,
    #f0f0f0
  ) !important;
  box-shadow: 0 4px 8px rgb(0, 0, 0), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
  border-radius: 6px !important;
}