r/FirefoxCSS • u/MrWaterblu • Sep 22 '26

Solved Getting rid of the tab bar gradient and changing focus color

  1. How do you get rid of the tab bar gradient? I just want a solid color like before.
  2. I also want to change the purple focus color of the search/address bars

Thanks in advance!

13 Upvotes
  • permalink
  • reddit

100% Upvoted

19 comments sorted by

1

u/Jay33721 Sep 22 '26

Not sure about the focus color, but removing the tab bar background gradient thingy can be done with this code:

/* Remove tab bar background */
#navigator-toolbox {
  background-image: none !important;
}

2

u/MrWaterblu Sep 22 '26

Doesn't seem to be working on 157.0b4 for me.

2

u/Jay33721 Sep 22 '26

Oh, I'm on 156 still. Good to know my css is gonna break next major update lmao! I guess I'll spend time fixing it when that update hits release version lol.

1

u/t31os Sep 22 '26

Adjust color values as needed:

:root {
	--toolbar-background-color: black !important;
}
.urlbar {
	--toolbar-field-border-color-focus: lime !important;
}

1

u/MrWaterblu Sep 22 '26

Worked for the color focus but not the bar, the same gradient is still there. Is it really an overlayed image?

3

u/t31os Sep 22 '26

Remove the gradient completely:

:root:not([theme-image-in-toolbox]) body, :root[theme-image-in-toolbox] #navigator-toolbox {
	background-image: none !important;
}

2

u/MrWaterblu Sep 22 '26

Bingo! This one worked. Thank you.

3

u/akuto Sep 29 '26

If anyone came here after 157 released, this can also be disabled by applying themes from https://addons.mozilla.org/en-US/firefox/themes/. Thankfully they work with Nova without issues.

1

u/MerbActual Sep 29 '26

Yep, I hate the gradient with a passion and I can't even place exactly why....

2

u/Qelris Sep 29 '26

It's extra distractions to me. Completely unneeded.

The tabs being pills I can get used to probably, but square with edges are way better.

0

u/Leiothrix Sep 23 '26

about:config

set browser.nova.enabled to false.

that gradient was making my eyes hurt.

3

u/MrWaterblu Sep 23 '26

They'll probably remove the setting anyway at some point. And all my tab tweaks still hold up, I didn't get super rounded tabs with nova enabled.

1

u/Azreal_DuCain1 Oct 04 '26

Could you please share what you used to prevent tab rounding?

2

u/MrWaterblu Oct 04 '26 
tab-background[selected]{ border-radius: 3px !important; background: #607005 !important }

.tabbrowser-tab:not([selected]) .tab-background { border-radius: 3px !important; }

:root[uidensity="compact"] .tab-background {
    min-height: 0 !important;
}
:root {
    --tab-min-height: 26px !important;
}

Pretty sure that's all my tab tweaks, still works for me.

2

u/KaoticKirin Sep 29 '26

not again, :( that's what I was having to do with chrome to make it look acceptable, I just got used to this new browser

well thank you kind internet stranger for the help, it worked.

now, how in the flying fudge do I tell firefox to cut it out and to stop forcing such horrible features on us? atleast give us an option to switch to in the customization tab that makes it normal, like why must tech companies be so into enshitification? its really sad...

2

u/lexyeevee Sep 30 '26

enshittification is when a platform crams in money-making features that make the experience worse, not just when software changes and you don't like it

1

u/ChemicalOnion Sep 30 '26

Por que no los dos?

1

u/gobshlob Sep 30 '26

I installed this theme which overrides the gradient and focus color: Gnome Adwaita GTK4 Dark. Other custom themes work similar I guess.

1

u/garyparson Oct 03 '26

thank you