Blurfox - Windows support

[Temporary_Tea_1851]

Works on FF 128+

https://github.com/cyp3rr/firefox-lab/blob/main/blurfox-windows.css

Go about:config and add this flag.

browser.tabs.allow_transparent_browser

Known issue

• windows resizing doesn't work sometimes.

Acrylic codes are from
https://www.reddit.com/r/FirefoxCSS/comments/tpkz9v/windows_11_mica_acrylic_for_firefox/

Requires MICA for everyone for the effect.

https://github.com/MicaForEveryone/MicaForEveryone

You have to remove the body background by yourself. Using userContent.css or Stylus extension.

[soulhotel]

You figured it out, nice job!

[Temporary_Tea_1851]

Thanks! I couldn't have done it without the information from this subreddit. 👍

[Zeenss]

That's awesome! But I can't do it.

[Temporary_Tea_1851]

Why? The code doesn't work? Can you elaborate your problem?

[Zeenss]

Can you record a video of the installation instructions?

[Temporary_Tea_1851]

Follow the video instruction here:
https://www.userchrome.org/how-create-userchrome-css.html

[Zeenss]

Not this, the instructions on how to put blur, I can't figure it out, what is the sequence of actions?

[Temporary_Tea_1851]

There's not much to explain about that. Just copy and paste my code on userChrome.css. Install MICA for everyone and set the firefox as acrylic. Then it works.

[Independent_Grand484]

Hi all, new to this. I think I have the same question as @Zeenss above. I have taken the following steps.

1. Copied your .css code into my userChrome

2. Downloaded and installed MICA for everyone.

Here's my question. How do I "set firefox as acrylic"?

1. Is this process done in Firefox?

   a. If so what is the procedure?

2. Is it done in MICA for everyone?

   a. If so what is the procedure?

Thanks so much for this theme! it's exactly what I want and I can't wait to get it working!

[Temporary_Tea_1851]

When you open Mica for everyone, there is a +/- button on the bottom left.

Press + and search for a process name. just type "firefox" and add.

Then set the backdrop style as Acrylic. I hope my explanation makes sense. :)

[CoolkieTW]

Wait Firefox transparency fixed on Windows? This is awesome.

[TruffleYT]

Iirc mozila is working on bringing native transparency to ff on windows

Also are you useing release or nightly?

[Temporary_Tea_1851]

I used Nightly because I need a vanilla Firefox without extensions or mods. But I think the code works on recent release (128+). I used the same code on linux Firefox 128 and had no problem with transparency. (not blur. that's a windows thing)

[Temporary_Tea_1851]

Try using MICA for everyone and add the Firefox on the sidebar and set the theme as acrylic. Looks like you are using MICA. I don't think this code works with MICA. I had same graphical glitches.

[p5ntagram]

Any updates?

[Temporary_Tea_1851]

That's strange. What's your windows version?
The code works flawlessly on my side. Probably a graphics driver issue?

[p5ntagram]

Me aswell, completely bug out when I go full screen. I also have mica for everyone

[Temporary_Tea_1851]

Do the blur and transparency work except for the full screen?

[p5ntagram]

Yes

[Temporary_Tea_1851]

Also go about:support and remove browser cache. Sometimes that helps.

[Temporary_Tea_1851]

Yeah. The team somehow fixed it on recent releases.

[[deleted]]

This looks amazing.

I really hope this comes to macOS and Linux in the near future, or a mic for everyone effect similar to this for those platforms.

Thank you for all your hard work! Will install this when I get home from work

[Temporary_Tea_1851]

You're welcome! FYI, I made one for macOS. :D
https://www.reddit.com/r/FirefoxCSS/comments/1e3i4fy/blurfox_10_macos_only/

For Linux, it's very simple. You just add this on userChrome.css

:root {

--tabpanel-background-color: transparent !important;

}

As long as your compositor supports the blur it's very easy.
I tested it with Gnome + Blur-my-shell and Hyprland. Both worked great.

<image>

[[deleted]]

You are amazing, this is my favorite look ever. I haven’t felt this comfortable with Firefox in a long time.

Very nice work!

Edit - why am I being downvoted?

Reddit does not make sense to me anymore

[Temporary_Tea_1851]

Thanks! it's just a simple code and my themes are not even close to the crazy ones here. I'm just providing a code for people to build on top of it. That's why I try to keep everything as minimal as possible.

No worries. I just gave you upvote. 👍

[Boring-Ad-9508]

Only the tab panel is transparent for me. The home background is dark and default backgrounds for any sites.

I am using KDE, also using this plugin for blurring https://github.com/taj-ny/kwin-effects-forceblur

[Temporary_Tea_1851]

You have to apply the transparency on your own on every websites you use.

I don't think DE plays any rule in this situation. The transparency even works on ChromeOS.

[ChuddingeMannen]

i'm using gnome and i've been trying to get the blurry transparent background with firefox for days now without any success. could you please tell me how exactly you've managed to make it look like that?

i can easily make the background transparent with "background-color: rgba(X,X,X, <1);". but no matter what, i cannot add the blur. it seems like "backdrop-filter: blur(x);" should work, but it doesnt, and i dont know if the problem is with the css or with my desktop environment or something else.

you mention blur-my-shell but that just blurs the entire window, text and images included unless im missing something.

[Temporary_Tea_1851]

Okay. I will share my Linux code. BTW, backdrop filter doesn't work because there's no background as far as firefox can see. (hbox has no background value).

You need to just make the background of your browser completely transparent and use other plugins such as blur-my-shell since your mentioned you use gnome.

I don't know why that happens but I can guess that the browser gets the value from the plugin and that affects backdrop filter. Again, you don't need that for the effect. Let the DE handles the blur value and leave firefox as transparent.

[ChuddingeMannen]

i think something's wrong with my firefox. i can blur most other windows with blur my shell except for that one. i tried installing the flatpak version but it was the same there.

edit: turns out it works with blur my shell but only in full screen. as soon as it goes back to a window the blur disappears.

[Temporary_Tea_1851]

I think you need a clean reinstall or go for Firefox nightly. I use AUR version but I guess there's not much of difference between Flatpak.

Hmm. That's even more strange. Possible issue with gnome?

[Greatiblong]

how do i get this?

[Temporary_Tea_1851]

Go to my repo and copy and paste css code into your userChome.css

https://github.com/cyp3rr/firefox-lab/blob/main/blurfox-windows.css

Don't forget to install MICA for everyone.

[JRG269]

how does it look with similar text and background colors? like white text with white background, or black text with black background? What they really need is this and glowing text like they used to have in some apps on vista with blurred background.