Firefox @lemmy.ml Quail4789 @lemmy.ml 4mo ago

[Solved] Transparent page background without affecting content

Is there a way to do this with user CSS on Firefox?

The content has to have full opacity. So setting opacity through the compositor or the opacity CSS property does not count.

Setting a background-color with some alpha on userContent.css technically works but because the browser itself is fully opaque, doesn't show the background. Trying to set background-related properties on #browser on userChrome.css doesn't have an effect. If I can make only the background of #browser transparent, this'll work. But I don't know if that's possible.

edit: it is possible, with lots of caveats. Site-specific fixes will be required, popups are hard to read. If you have dark wallpapers enable dark reader to make site content readable on a dark background.

1- set browser.tabs.allow_transparent_browser to true

2- in userChrome.css add #main-window, #tabbrowser-tabpanels{ background: transparent !important; }

3- userContent.css:

*{
  background-color: transparent !important;
}
/* if you don't want full transparency */
html:root{
  background-color: #00000080 !important;
}

16 comments

If you're using picom you can just write a custom pixel shader that makes one very specific color transparent and then use css to set background-color to that value. Essentially just writing yourself a very hacky greenscreen solution
- I am using Hyprland but it also supports custom shaders. I might give this a try, thanks.
- So, I've Googled my way to a very simple example to test how this'd work. However, the example below basically doesn't have any effect. (Setting pixColor[1] = 1.0; makes everything green so the shader is loaded correctly).
  
  precision highp float; varying vec2 v_texcoord; uniform sampler2D tex; void main() { // get the pixel color vec4 pixColor = texture2D(tex, v_texcoord); // change the alpha pixColor[3] = 0.75; // set the pixel color gl_FragColor = pixColor; }
  
  Since I don't know anything about shaders, before I open an issue on Hyprland, is this how you'd set the alpha of each pixel on a screen?
  
  I suspect this might not be possible in Hyprland after all as it doesn't natively support per-window shaders. IIUC, Hyprland applies the shader after it composits so there's technically nothing behind the window I'm trying to make transparent.
  
  Post the Hyprland config too?
  
  Does it make the entire screen green by chance, not just the windows? If the shader applies to the whole screen, then setting alpha on it doesn't really makes sense and is probably discarded since your monitor can't display transparency. You need to make sure it applies on a per-window basis for them to be composited as transparent and show your wallpaper behind it.
I don't think I understand exactly what parts you want to make transparent, but this does work:

set browser.tabs.allow_transparent_browser to true

in userChrome.css add #main-window, #tabbrowser-tabpanels{ background: transparent !important; }

in userContent.css add html:root{ background-color: transparent !important; }

The above would make window background, and the are behind web-content transparent as well as background of html documents - otherwise the background of browser area wouldn't show up anyway. Toolbars that have their own specified colors would still be colored - which might be opaque or not depending what theme you have selected.
- Your userContent.css didn't work for me but body { background: transparent !important; } does.
  
  Although obvious in hindsight, on many sites, most of the webpage content isn't actually background so it is going to take a lot of per-site CSS to get transparent webpages.
  
  Yeah, I just figured the safest option would be to only set the actual document root element transparent - in practice I think it's possibly more likely that the <body> element has background set by the page - although the page might as well set both. So yes, it depends on the website.
You might be able to convince Firefox to be transparent with a GTK theme as Firefox uses GTK under the hood for the window. If you're lucky it won't bother clearing it with black just in case and it'll actually be transparent.

The shader option is pretty neat and easy though.
- Please see my response to the other comment. I could use the help if you know about shaders.

16 comments