Firefox-Mod-Blur

KO | EN

gitlite — search

#hacktoberfest #ai #golang #machine-learning #rust #deep-learning #macos #java #windows #cli #kubernetes #awesome-list #openai #open-source

Firefox-Mod-Blur

(★ 1,726)

Firefox CSS Theme - Dark theme / More compact / Modular / Blur

File Explorer

Download Latest Version (.zip)

- - about-logo-private-changed.png
  - close-themes.svg
  - eye.svg
  - files-light.svg
  - files.svg
  - firefox-light.svg
  - firefox-private-light.svg
  - firefox-private.svg
  - firefox.svg
  - firefoxx.png
  - home.svg
  - left-arrow-light.svg
  - left-arrow-lightContext.svg
  - left-arrow.svg
  - left-arrowContext.svg
  - maximize-themes.svg
  - menu-light.svg
  - menu-private-light.svg
  - menu-private.svg
  - menu.svg
  - minimize-themes.svg
  - private-light.svg
  - private.svg
  - restore-themes.svg
  - right-arrow-light.svg
  - right-arrow-lightContext.svg
  - right-arrow.svg
  - right-arrowContext.svg
  - search-glass.svg
  - search-light.svg
  - search.svg
  - stack.svg
  - three-dots-vertical.svg
- - noise-512x512.png
  - spill-light.svg
  - spill-main-light.svg
  - spill-main.svg
  - spill.svg
- - wallpaper.jpg
- - readme.txt
- - readme.md
- - installation.txt
- README.md
README.md
userChrome.css
userContent.css

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h2 align="center"><img src="https://user-images.githubusercontent.com/61329159/204102654-0e414196-bea2-4147-9e1e-aeb8b4190893.png" width="20" height="20" />Firefox Mod Blur - Modular</h2>

## 🔹 macOS style buttons
 <img alt="FirefoxCss" src="https://i.imgur.com/cvBzN61.gif">

## 🔹 Light and Dark theme support
 <img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/08099fbc-8b04-4f04-9f57-9b73911fd0c0">

## 🔹 Updated context menu design
<img alt="FirefoxCss" src="https://i.imgur.com/uG9BgQH.png">

## 🔹 Clean compact search with hidden buttons
<img alt="FirefoxCss" src="https://i.imgur.com/gu3HnMx.gif">

## 🔹 More compact and responsive homepage
<img alt="FirefoxCss" src="https://i.imgur.com/lhc2Muh.gif">

<h2 align="left">Select and add extra styles and functions</h2>

<details><summary>Min-max-close buttons style :gear:</summary>

Select one min-max-close_buttons.css

Left side MacOS style<img alt="FirefoxCss" src="https://i.imgur.com/pR78PN5.png">
Right side MacOS style<img alt="FirefoxCss" src="https://i.imgur.com/032WjXp.png">
Right side OS<img alt="FirefoxCss" src="https://i.imgur.com/uTcbB4p.png">
Left side OS<img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/45180997-9195-48bd-a135-9de65c4a27ac">
Theme default<img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/cddf0baf-0f9e-4467-a47f-77036361999f"></details>

<details><summary>Bookmarks bar modifications :gear:</summary>

popout_bookmarks_bar_on_hover.css<img alt="FirefoxCss" src="https://i.imgur.com/Hjy8kyU.gif">
remove_folder_icons_from_bookmarks.css<img alt="FirefoxCss" src="https://i.imgur.com/xxpKEaP.gif">
bookmarks_bar_same_color_as_toolbar.css<img alt="FirefoxCss" src="https://i.imgur.com/a2sjphq.gif">
Transparent Bookmarks bar. Enable <code>mod.transparent.bookmarks-bar</code> or <code>mod.transparent.bookmarks-bar.centered</code> in <code>about:config</code> <img alt="FirefoxCss" src="https://user-images.githubusercontent.com/61329159/209413186-8fbb75ec-f058-4a74-87bc-61141fe7efea.jpg"></details>

<details><summary>Privacy mods :gear:</summary>

privacy_blur_email_in_main_menu.css<img alt="FirefoxCss" src="https://i.imgur.com/gE2PVpr.gif">
privacy_blur_email_in_sync_menu.css<img alt="FirefoxCss" src="https://i.imgur.com/MJqZ9TW.gif">
privacy_blur_tabs_content.css<img alt="FirefoxCss" src="https://i.imgur.com/8RPR1It.gif">
privacy_change_email_text.css<img alt="FirefoxCss" src="https://i.imgur.com/uuq06p5.png"></details>

<details><summary>Extension menu changes :gear:</summary>

Style 1 - cleaner_extensions_menu.css<img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/blob/master/EXTRA%20MODS/Compact%20extensions%20menu/Style%201/preview.gif?raw=true" width="325" height="398">
Style 2 - cleaner_extensions_menu.css<img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/blob/master/EXTRA%20MODS/Compact%20extensions%20menu/Style%202/preview.png?raw=true">

## How to enable/disable extra functionality

In search bar type -> `about:config`
 
If it's configured using numbers select `number` else select `boolean` and press add -> `+`

> To reset default values `delete` the added preference or set it to `false` (for boolean).
> 
> To find all added preferences search "mod."

## Copy and Enable preferred modifications:

| Preference name | Value       | Notes                       | Preview |
|----------------|--------------|-----------------------------------|-----------------------------------|
| mod.number.of.extensions.in.a.row                 | 1 to 10    | Change number of extensions in one row. Default [4]      | ![preview-number-of-extensions](https://github.com/user-attachments/assets/f73ed998-c70e-441e-8572-3361b4793cca) |
| mod.extensions.menu.extention-icon.size           | 12 to 30    | Change extensions icons size. Default [22]  | ![preview-extension-menu-icon-size](https://github.com/user-attachments/assets/1d7c0815-dff3-4c4f-9f12-3a981e989e0b) |
| mod.hide.manage-extensions.button                 | true   | Hide the button that opens all extensions manager inside settings. |  ![Hide-extension-button](https://github.com/user-attachments/assets/eb191a66-3cb5-4f2c-905d-57c44fef941f) |
| mod.disable.extensions-menu.separator             | true   | Hide sepatator between active and inactive/faded extensions. Only visible when there is at least one faded extension.  | ![image](https://github.com/user-attachments/assets/f40b7043-9917-46a4-b3c1-4eb0ea510ed3) |
| mod.hide.faded-extensions.inside.extensions-menu  | true   | Hide all faded/inactive non interactable extensions from extension menu. Not necessary if they aren't visible by default.  | ![preview-with-button](https://github.com/user-attachments/assets/531b9958-40f0-4e12-95dd-649519670b10) |

</details>

<details><summary>Icon changes :gear:</summary>

firefox_view_icon_change.css<img alt="FirefoxCss" src="https://i.imgur.com/wuA50MP.png">
white_github_icon_in_bookmarks.css<img alt="FirefoxCss" src="https://i.imgur.com/XDBkkxj.jpg">
ublock-icon-change.css<img alt="FirefoxCss" src="https://i.imgur.com/jkCufVD.jpg"></details>

<details><summary>More compact Vertical Tabs :gear:</summary>

Enable <code>mod.compact.vertical.tabs</code> in <code>about:config</code> <img width="136" height="523" alt="image" src="https://github.com/user-attachments/assets/fbd97abb-6115-4861-888a-1c6aa4197f11" /></details>

<details><summary>Centered Tabs :gear:</summary>

Enable <code>mod.centered.tabs</code> in <code>about:config</code> <img width="1848" height="104" alt="image" src="https://github.com/user-attachments/assets/2a74fd5a-ae63-4469-a502-d6482fadd62e" /></details>

<details><summary>Hide Tab preview panel :gear:</summary>

Enable <code>firefoxcss.disable.tab.preview.panel.fully</code> in <code>about:config</code> <img width="299" height="281" alt="image" src="https://github.com/user-attachments/assets/dd684579-3142-4245-9e75-f0cd29e1d1e6" /></details>

<details><summary>Hide scrollbar when Vertical tabs overflow :gear:</summary>

Enable <code>mod.disable.scrollbar.in.vertical.tabs</code> in <code>about:config</code> <img width="365" height="635" alt="image" src="https://github.com/user-attachments/assets/9d9bca08-67cc-4d91-babe-d56938f07095" /></details>

<details><summary>Enable Search Box focus outline :gear:</summary>

Enable <code>mod.searchBox.focus.outline.enable</code> in <code>about:config</code> <img width="1481" height="45" alt="Screenshot 2026-03-25 044124" src="https://github.com/user-attachments/assets/52537d21-347b-4d3c-9ebf-d3b3e1ba3af9" /></details>

<details><summary>Tabs on top :gear:</summary>

Enable <code>firefoxcss.tabs.on.top.enable</code> in <code>about:config</code>. Doesn't work with custom window control buttons for now (linux should work)<img width="1716" height="84" alt="image" src="https://github.com/user-attachments/assets/a3b86a6f-9627-4534-b493-04c06c7087ae" /></details>

<details><summary>Window Frame border mods :gear:</summary>

- Fully padded Window border: Enable <code>mod.main.window.frame.style-1</code> or <code>mod.main.window.frame.style-2</code> in <code>about:config</code> <img width="725" height="417" alt="Screenshot 2026-03-25 034441" src="https://github.com/user-attachments/assets/1ca0e1a7-8330-4f80-bf35-7caee051ac2e" />

- Default Window border and shadow: Disable <code>mod.disable.browser.border-and-shadow</code> in <code>about:config</code> <img width="94" height="166" alt="Screenshot 2026-03-25 031116" src="https://github.com/user-attachments/assets/0370b503-f02d-4260-92dc-e09c9d948144" />

</details>

<details><summary>Always show Search Bar buttons :gear:</summary>

Enable <code>mod.search.info.buttons.show.always</code> in <code>about:config</code> <img width="1408" height="42" alt="Screenshot 2026-03-25 041240" src="https://github.com/user-attachments/assets/147a8ee1-3cf7-40ac-9d21-3e123172ddd8" /></details>

<details><summary>Active tab has static width :gear:</summary>

selected_tabs_static_width.css <img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/4dc26c78-6714-43f8-bfb5-17a0dab3b920"></details>

<details><summary>Colored sound playing tab :gear:</summary>

colored_soundplaying_tab.css <img alt="FirefoxCss" src="https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/8963e4fb-491f-440f-84c1-ec1629da4074"></details>

<details><summary>Hide List all tabs button :gear:</summary>

hide_list-all-tabs_button.css [Shows when tabs overflow]<img alt="FirefoxCss" src="https://i.imgur.com/M669iGJ.gif"></details>

<details><summary>Restore icons in main menu :gear:</summary>

icons_in_main_menu.css (<a href="https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css">source</a>)
<img alt="FirefoxCss" width="196" height="439" src="https://i.imgur.com/s9eV36k.png"></details>

<details><summary>Remove title text from homepage shortcuts :gear:</summary>

remove_homepage_shortcut_title_text.css
<img alt="FirefoxCss" width="85%" height="85%" src="https://user-images.githubusercontent.com/61329159/206245239-47c63da4-3945-4d82-9c2e-10dda01957da.png"></details>

<details><summary>Center Widgets in New Tab :gear:</summary>

Enable <code>mod.center.widgets</code> or <code>mod.center.widgets.keep.title-text</code> in <code>about:config</code>

mod.center.widgets
<img width="1575" height="430" alt="image" src="https://github.com/user-attachments/assets/f34c71a1-4243-4178-85d8-efc2bb52f693" />
	
mod.center.widgets.keep.title-text
<img width="1479" height="385" alt="image" src="https://github.com/user-attachments/assets/a9dbd9e9-a808-426b-b086-c93c9ec589a3" /></details>

<details><summary>Experimental: Popout Searchbar with Blur :gear:</summary>

Enable <code>mod.popout.searchbar</code> or <code>mod.popout.searchbar.no-animation</code> in <code>about:config</code> <img width="1137" height="843" alt="preview7" src="https://github.com/user-attachments/assets/6f104b17-4708-4ead-b62a-8fc8e718f459" /></details>

<details><summary>Experimental: Extra Blur mods (HDR not working with this enabled for now!) :gear:</summary>

- Combined extra Blur <code>mod.combined.extra.blur</code>, combines: "mod.panel-menu.blur", "mod.searchbar.blur" and "mod.vertical-tabs.expand.blur". Enable in <code>about:config</code>

- Searchbar Blur: Enable <code>mod.searchbar.blur</code> in <code>about:config</code> <img width="351" height="118" alt="image" src="https://github.com/user-attachments/assets/45b337cf-9170-4b14-9efa-e904709910cf" /><img width="349" height="119" alt="image" src="https://github.com/user-attachments/assets/b855216e-6fa8-4b1f-9f5b-3f39a5f59566" />

- Panel menu Blur: Enable <code>mod.panel-menu.blur</code> in <code>about:config</code> 

	<img width="416" height="182" alt="image" src="https://github.com/user-attachments/assets/20692d20-1e7a-4f6a-aa91-5515a00621cd" />

- Vertical Tabs expand Blur: Enable <code>mod.vertical-tabs.expand.blur</code> in <code>about:config</code> 

	<img width="89" height="328" alt="607544747-cb47553b-bb5c-413a-b23c-c76060b68b95" src="https://github.com/user-attachments/assets/e8f3279c-6445-413b-a9f0-de1433f39a09" />

</details>

<details><summary>Circular homepage shortcuts :gear:</summary>

circular_homepage_shortcuts.css
<img alt="FirefoxCss" width="85%" height="85%" src="https://user-images.githubusercontent.com/61329159/206245889-17439603-1239-4853-b7a8-7e6fd234f90e.png"></details>

<details><summary>Wallpaper Blur in New tab page :hammer:</summary>

Enable <code>mod.new-tab.background.blur</code> using <code>Number</code> field in <code>about:config</code> 

Type intensity number [1 to 10] - Default [4] is used when selecting Boolean field instead of Number 
<img width="2154" height="1120" alt="Screenshot 2026-06-04 233259" src="https://github.com/user-attachments/assets/085d0e5a-59b9-4be7-ae2b-74684b067402" />
<img width="1212" height="557" alt="Preview" src="https://github.com/user-attachments/assets/c7d8329b-9238-404f-881d-0d83e7b47c9a" />
</details>

<details><summary>Spill style theme :hammer:</summary>

Enable <code>mod.spill-theme</code> in <code>about:config</code> 
<img alt="FirefoxCss" src="https://user-images.githubusercontent.com/61329159/219373252-a9cc81cb-1307-4899-a019-3c70c1e26b5c.png">
<img alt="FirefoxCss" src="https://user-images.githubusercontent.com/61329159/219373265-a0cff784-95cc-4000-9567-06c8babf214b.png"></details>

<details><summary>Card Style theme :hammer:</summary>

Enable <code>mod.card-theme.style.1</code> or <code>mod.card-theme.style.2</code> in <code>about:config</code> <img width="1043" height="296" alt="Preview_Style2_Dark" src="https://github.com/user-attachments/assets/1b41d335-0bbe-42c7-8aaa-51dadfbf0a7a" /><img width="1022" height="281" alt="Preview_Style1_Dark" src="https://github.com/user-attachments/assets/4ac5adc5-439f-4a44-8185-16a5cdfa8bb8" /><img width="1011" height="295" alt="Preview_Style2_Light" src="https://github.com/user-attachments/assets/d2775317-a621-409f-bfa4-3ddb0b138b80" /><img width="1022" height="293" alt="Preview_Style1_Light" src="https://github.com/user-attachments/assets/1363bdfb-f924-4f73-93e7-662ba028a48e" /></details>

<details><summary>On Pause - Acrylic MicaForEveryone :hammer:</summary>
Will be updated when Firefox fully releases blur
<img alt="FirefoxCss" src="https://i.imgur.com/NJVXlAl.png"></details>

<h2>:wrench: Installation</h2>

> [!IMPORTANT]
> ##### 1. In `about:config` set `toolkit.legacyUserProfileCustomizations.stylesheets` to "True" for your custom themes to work.
> ##### 2. Download latest or your preferred firefox version [.zip file](https://github.com/datguypiko/Firefox-Mod-Blur/releases/latest). 
> ##### 3. You can find your profile folder by writing `about:support` in URL bar and using `Open folder` in `Profile folder` section.
> ##### 4. Put `userChrome.css`, `userContent.css`, `ASSETS`  in chrome folder (create `chrome` folder inside your main profile folder if it doesnt exist).
> ##### 5. Put any selected extra `.css` modification files (not folders) from `EXTRA MODS` to inside of your `chrome` folder.
> ##### 6. File Structure (required files/folders marked with *):
>
>	 :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `userChrome.css *`
>
>	 :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `userContent.css *`
>
>	 :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `ASSETS *` `/`
>	
>	 :open_file_folder: `...` `/` `your profile` `/` `chrome` `/` `[extra modification file].css`

> [!TIP]
> <details><summary>How to Toggle between <code>Light</code> and <code>Dark</code> theme:</summary>
> There are two settings to change in firefox (pictures below). 
>
> - Setting both to auto makes it adapt to your operating system theme.
> - Setting Theme(2) to <code>Light</code> or <code>Dark</code> will force it no matter of Operating System colors.
> - Best to leave Website Appearance(1) settings set to auto and just Change to preferred Theme(2). 
>
> 1. Website appearance (changes new tab and websites colors)
> ![image](https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/a5f6726e-6bc0-4237-a770-b60ffb144c95)
> 2. Theme (changes toolbar and browser text colors, also sets text colors to new tab page).
> ![image](https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/76ddf071-7a20-46fa-a029-fc28f96862a9)
> </details>
> <details><summary>I use firefox integrated Flexible space for spacing:</summary>
>
> ![image](https://github.com/datguypiko/Firefox-Mod-Blur/assets/61329159/8598344a-dbf6-456e-bdd3-b5abe5a8abcd)
> </details>

<h2>:wrench: Easy Installation Script by Alan-Kuan </h2>

Download https://github.com/Alan-Kuan/Firefox-Mod-Blur

Installation Instructions https://github.com/Alan-Kuan/Firefox-Mod-Blur#page_with_curl-installer-script

<h2>:wrench: MicaForEveryone Installation</h2>

> [!Warning]
> ##### Will be updated when firefox fully enables blur. No need to external programs.
 
1. Download the portable or installation file from [github.com/MicaForEveryone](https://github.com/MicaForEveryone/MicaForEveryone/releases).
2. Install the extra files it asks you to install. And run the program.
3. At the bottom left corner press `Add Rule` -> `Add Process Rule`, type `firefox` -> `add`.
4. On the left panel select and open `firefox` section. Change Mica to `Acrylic` for better blur effect. 
5. Dont forget to download my css file `acrylic_micaforeveryone.css` from `EXTRA THEMES` and  put it inside `Chrome` folder (and base files from Installation guide above).
6. Remove and dont use any other min-max-close window button files.
7. Expermental:warning: In MicaForEveryone settings `firefox` section enable `Blur Behind` so when the window is not active it will still be blurred.

<details><summary><h2>:page_facing_up: Other</h2></summary>
	
> Old version files backup: https://github.com/datguypiko/Firefox-old-files-backup

</details>

<details><summary><h2>:page_facing_up: Sources</h2></summary>

> Source for Backdrop filter: [`https://www.reddit.com/r/FirefoxCSS/comments/ddi4dc/testing_the_backdropfilter_in_the_url_dropdown/`](https://www.reddit.com/r/FirefoxCSS/comments/ddi4dc/testing_the_backdropfilter_in_the_url_dropdown/)
	
> icons_in_main_menu.css (<a href="https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css">source</a>)

</details>

Firefox-Mod-Blur

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Firefox-Mod-Blur

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README