<aside> <img src="https://d4.alternativeto.net/8uiK7f16aRXkhpSnZFA2kAAFbmk4iHIwahDTjDSvoS4/rs:fit:40:40:0/g:ce:0:0/exar:1/YWJzOi8vZGlzdC9pY29ucy96ZW4tYnJvd3Nlcl8yNDI3ODMuc3Zn.svg" alt="https://d4.alternativeto.net/8uiK7f16aRXkhpSnZFA2kAAFbmk4iHIwahDTjDSvoS4/rs:fit:40:40:0/g:ce:0:0/exar:1/YWJzOi8vZGlzdC9pY29ucy96ZW4tYnJvd3Nlcl8yNDI3ODMuc3Zn.svg" width="40px" />

A guide to enable transparency on Zen browser. This method better suits macOS where Windows will only achieve the dull mica blur effect without additional steps.

Also I am working on a dedicated one click Zen mod for this so waiting for approval :D

https://github.com/zen-browser/theme-store/pull/1003

</aside>

<aside> <img src="/icons/asterisk_lightgray.svg" alt="/icons/asterisk_lightgray.svg" width="40px" />

Step 1 - Allow Zen to be transparent

Go to about:config and search for browser.tabs.allow_transparent_browser and toggle it true

</aside>

<aside> <img src="/icons/asterisk_lightgray.svg" alt="/icons/asterisk_lightgray.svg" width="40px" />

Step 2 - Live Edit Zen

Follow the below guide to setup live editing of userChrome.css in Zen.

Live Editing Zen Theme

</aside>

<aside> <img src="/icons/asterisk_lightgray.svg" alt="/icons/asterisk_lightgray.svg" width="40px" />

Step 3 - Modify CSS

Add the following css into the userChrome.css

/* Zen transparency */

:root{
	--zen-main-browser-background: #00000000 !important;
}

Now your browser sidebar should have transparency (disable any other themes or gradients)

</aside>

<aside> <img src="/icons/asterisk_lightgray.svg" alt="/icons/asterisk_lightgray.svg" width="40px" />

Additional Step 4 - Make websites transparent

Use a CSS injector like https://addons.mozilla.org/en-US/firefox/addon/stylebot-web/

or edit the userContent.css or use Dark Reader with a modified stylesheet to make website backgrounds transparent.

Here’s my latest StyleBot backup which you can import in with it’s options → Sync → Import. (View raw and download as a json)

https://gist.github.com/sameerasw/9d9e2b9cb5517a2821b376f8868be46b

</aside>

<aside> <img src="/icons/asterisk_lightgray.svg" alt="/icons/asterisk_lightgray.svg" width="40px" />

Got any issues?

Join the Zen Browser 👋😊 Discord Server!

Sameera Sandakelum

</aside>