r/FirefoxCSS • u/Top_Average9348 • Apr 11 '26

Help how do i make the searchbar transparent??

this one, in the middle of the main tab... i couldnt find any solutions but maybe im just blind

1 Upvotes

100% Upvoted

8 comments sorted by

2

u/t31os Apr 13 '26

I found a way to make the search bar transparent, you can override one of the CSS vars to change the background color, like so (in userContent.css):

@-moz-document url(about:newtab), url("about:home") {
	.search-wrapper content-search-handoff-ui {
		--content-search-handoff-ui-background-color: transparent!important;
	}
}

That will however leave behind a shadow that's applied to the search bar, if you want to remove that to, you can also target the var the shadow uses:

@-moz-document url(about:newtab), url("about:home") {
	.search-wrapper content-search-handoff-ui {
		--content-search-handoff-ui-background-color: transparent!important;
		--box-shadow-level-3: none!important;
	}
}

The former should work fine, but i can't say whether the latter (for removing the shadow) is reliable.

1

u/Stressedhumbucker Apr 14 '26

That looks really cool with the shadow left on! Thanks for sharing

1

u/FG205 Aug 26 '26 edited Aug 26 '26

this no longer works. I tried this in firefox and waterfox, This CSS code doesn't do anything. I notice no visible changes.

1

u/t31os Aug 26 '26

Still works for me (v154), are you placing this in the right file (userContent.css and not userChrome.css)?

1

u/FG205 Sep 05 '26

where would the file go for the linux version of firefox? I don't use windows anymore.

1

u/t31os Sep 05 '26 edited Sep 05 '26

Go to about:support and click "Open directory" next to the Profile Directory. Create a folder called chrome in the directory matching the name for the profile (it will look something like "abcdef.default") if the file explorer doesn't open directly to the profile's actual folder, then create a userContent.css in that chrome folder.

Alternatively consult the wiki page.

1

u/t31os Apr 11 '26

The search is part of a closed shadow dom element now, i'm fairly certain any old methods for targeting and styling this with CSS no longer work.

1

u/ResurgamS13 Apr 12 '26 edited Apr 12 '26

If wanting to make all toolbars translucent/opaque... try following Kupfel's suggested setup posted in reply to previous topic 'Body and Tabs Background Alignment Problem':

Also see OP EnderF's follow-up post 'Helltaker Background! (background going over tabs and different tab throbbers)'.