[Solved] Transparent page background without affecting content

Quail4789@lemmy.ml to Firefox@lemmy.ml – 22 points –

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

You are viewing a single comment
View all 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.

Yes, turns out Hyprland doesn't support per-window shaders and applies them after rendering so can't do transparency with them.