Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How do I keep firefox from using drop-shadows on unselected tabs? Once I started using personas, the inactive tabs all have shadows under their text that reduce their readability.

share|improve this question
up vote 2 down vote accepted

I noticed this while using the Tree Style Tab add-on with Firefox 4, and solved it by adding the following to my userChrome.css file:

.tabbrowser-tab { text-shadow: none !important; }

This file is located in the chrome/ folder of your profile. If one doesn't already exist, you'll want to copy the corresponding example file and edit it accordingly.

Not sure if that style is specific to Tree Style Tab, or a generic XUL style used by Firefox, but it's worth a shot.

share|improve this answer
I will try this once I upgrade to firefox 4. – K Robinson Mar 27 '11 at 1:47
.tabbrowser-tab { text-shadow: none !important; }

This works perfectly to disable all text shadows in FF4 and FF5

share|improve this answer

Quick tip/guide to readers of the answer, like me.

You must create the userChrome.css inside your profile folder.

Operating system                    Profile folder location(s)
Windows NT (NT4.x/2000/XP/Vista/7)  "%APPDATA%\Mozilla\Profiles\XXXXXX.Default\"
Unix/Linux                          ~/.mozilla/
Mac OS X                            ~/Library/Mozilla/ -- ~/Library/Application Support/
  • Under Windows press Windows Key + R → Type in %APPDATA% → Click OK
  • Create a folder "chrome" inside your profile folder;
  • Create the nonexistent userChrome.css with the CSS string suggested;
  • Restart your browser.
share|improve this answer
Does not work on my Firefox 37 on Windows 7 x64 & Windows 8.1 – Benj Jun 22 '15 at 10:04

I found a clean and easy answer over there :, just follow instructions, takes at least five seconds.

This problem of shadowed text in tabs is really a pain in... when you are using a lot of tabs !

In case of the link would die :

Install Stylish addon. Use this snippet :

.tabbrowser-tabs .tab-text { color: black; text-shadow: none; }

#TabsToolbar * { color: black; text-shadow: none; }

Many thanks to 'unmacaque' for this !

share|improve this answer
Nice, basically works. However, you may not want to override a specific theme's text color. I just left out the color: black part and it works quite nicely. – Cedric Reichenbach May 19 at 8:03
I agree, the solution I found is a bit heavy. Thanks for sharing yours :) – Benj May 19 at 10:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .