• Minimum Requirements

  • Firefox 144
  • Windows / MacOS / Linux

• Download the chrome folder and put it in your user profile folder

• Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

• WaveFox.Tabs.Shape > 1

• WaveFox.Tabs.Shape > 2

• WaveFox.Tabs.Shape > 3

• WaveFox.Tabs.Shape > 4

• WaveFox.Tabs.Shape > 5

• WaveFox.Tabs.Shape > 6

• WaveFox.Tabs.Shape > 7

• WaveFox.Tabs.Shape > 8

• WaveFox.Tabs.Shape > 9

• WaveFox.Tabs.Shape > 10

• WaveFox.Tabs.Shape > 11

• WaveFox.Tabs.Shape > 12

Install DWMBlurGlass. Configure to your liking and activate the keys below. Works only with the system theme.

• WaveFox.Windows10.Transparency.Enabled and browser.tabs.inTitlebar > 1

Requires Linux with transparency support. Works only with the system theme.

• WaveFox.Linux.Transparency.Enabled and browser.tabs.inTitlebar > 1

Works only with the system theme.

• WaveFox.Toolbar.Transparency > 1 or 2 or 3 or 4 and browser.tabs.inTitlebar > 1

Works only with System / Light / Dark theme.

• WaveFox.LightTheme.Tabs.Shadows > 1 or 2 or 3 or 4

• WaveFox.DarkTheme.Tabs.Shadows > 1 or 2 or 3 or 4

• WaveFox.Tabs.Separators > 1 or 2 or 3 or 4

• WaveFox.Tabs.Background.Inactive.Enabled

This is third-party code. I will update this code according to the original source.

• svg.context-properties.content.enabled (Required key)
• WaveFox.Icons > 1 or 2 (Required key)

The keys below are relevant only for the second option.

• userChrome.icon.panel_full or userChrome.icon.panel_photon
• userChrome.icon.library
• userChrome.icon.panel
• userChrome.icon.menu
• userChrome.icon.context_menu
• userChrome.icon.global_menu
• userChrome.icon.global_menubar
• userChrome.icon.1-25px_stroke
• userChrome.icon.account_image_to_right
• userChrome.icon.account_label_to_right
• userChrome.icon.menu.full
• userChrome.icon.global_menu.mac

• WaveFox.DragSpace.Tabs > 1 or 2 or 3
• WaveFox.DragSpace.TabBarLeftSide.Disabled
• WaveFox.DragSpace.TabBarRightSide.Disabled

• WaveFox.Tabs.SelectedTabIndicator.Enabled

• WaveFox.TabsBelowURL.Enabled and browser.tabs.inTitlebar > 0

• WaveFox.OneLine > 1 or 2

• WaveFox.WebPage.Floating.Enabled

Works only with system theme. Requires transparency support from the operating system. The quality of this option depends heavily on the specific website.

• WaveFox.WebPage.Transparency > 1 or 2 and browser.tabs.allow_transparent_browser (1 - New tab page only / 2 - All browser windows and all websites)
  • WaveFox.WebPage.Background.Saturation > 1 or 2 or 3

• WaveFox.VerticalTabs.WebPage.Floating > 1 or 2 or 3

Disables the ability to pin tabs by dragging. Some users find this feature annoying.

• WaveFox.Experimental.Tabs.Pin_By_Dragging.Disabled

• Minimum Requirements

  • Firefox 140 ESR
  • Windows / MacOS / Linux

• Download the chrome folder and put it in your user profile folder

• Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

• WaveFox.Tabs.Shape > 1

• WaveFox.Tabs.Shape > 2

• WaveFox.Tabs.Shape > 3

• WaveFox.Tabs.Shape > 4

• WaveFox.Tabs.Shape > 5

• WaveFox.Tabs.Shape > 6

• WaveFox.Tabs.Shape > 7

• WaveFox.Tabs.Shape > 8

• WaveFox.Tabs.Shape > 9

• WaveFox.Tabs.Shape > 10

• WaveFox.Tabs.Shape > 11

• WaveFox.Tabs.Shape > 12

Install DWMBlurGlass. Configure to your liking and activate the keys below. Works only with the system theme.

• WaveFox.Windows10.Transparency.Enabled and browser.tabs.inTitlebar > 1

Requires Linux with transparency support. Works only with the system theme.

• WaveFox.Linux.Transparency.Enabled and browser.tabs.inTitlebar > 1

Works only with the system theme.

• WaveFox.Toolbar.Transparency > 1 or 2 or 3 or 4 and browser.tabs.inTitlebar > 1

Works only with System / Light / Dark theme.

• WaveFox.LightTheme.Tabs.Shadows > 1 or 2 or 3 or 4

• WaveFox.DarkTheme.Tabs.Shadows > 1 or 2 or 3 or 4

• WaveFox.Tabs.Separators > 1 or 2 or 3 or 4

• WaveFox.Tabs.Background.Inactive.Enabled

This is third-party code. I will update this code according to the original source.

• svg.context-properties.content.enabled (Required key)
• WaveFox.Icons > 1 or 2 (Required key)

The keys below are relevant only for the second option.

• userChrome.icon.panel_full or userChrome.icon.panel_photon
• userChrome.icon.library
• userChrome.icon.panel
• userChrome.icon.menu
• userChrome.icon.context_menu
• userChrome.icon.global_menu
• userChrome.icon.global_menubar
• userChrome.icon.1-25px_stroke
• userChrome.icon.account_image_to_right
• userChrome.icon.account_label_to_right
• userChrome.icon.menu.full
• userChrome.icon.global_menu.mac

• WaveFox.DragSpace.Tabs > 1 or 2 or 3
• WaveFox.DragSpace.TabBarLeftSide.Disabled
• WaveFox.DragSpace.TabBarRightSide.Disabled

• WaveFox.Tabs.SelectedTabIndicator.Enabled

• WaveFox.TabsBelowURL.Enabled and browser.tabs.inTitlebar > 0

• WaveFox.OneLine > 1 or 2

• WaveFox.WebPage.Floating.Enabled

Works only with system theme. Requires transparency support from the operating system. The quality of this option depends heavily on the specific website.

• WaveFox.WebPage.Transparency > 1 or 2 and browser.tabs.allow_transparent_browser (1 - New tab page only / 2 - All browser windows and all websites)
  • WaveFox.WebPage.Background.Saturation > 1 or 2 or 3

• Minimum Requirements

  • Firefox 128 ESR
  • Windows / MacOS / Linux

• Download the chrome folder and put it in your user profile folder

• Go to about:config and activate the key toolkit.legacyUserProfileCustomizations.stylesheets

• Specify the desired shape of the tabs

  Tabs (Option 1)

  

  • userChrome.Tabs.Option1.Enabled

  Tabs (Option 2)

  

  • userChrome.Tabs.Option2.Enabled

  Tabs (Option 3)

  

  • userChrome.Tabs.Option3.Enabled

  Tabs (Option 4)

  

  • userChrome.Tabs.Option4.Enabled

  Tabs (Option 5)

  

  • userChrome.Tabs.Option5.Enabled

  Tabs (Option 6)

  

  • userChrome.Tabs.Option6.Enabled

  Tabs (Option 7)

  

  • userChrome.Tabs.Option7.Enabled

  Tabs (Option 8)

  

  • userChrome.Tabs.Option8.Enabled

  Tabs (Option 9)

  

  • userChrome.Tabs.Option9.Enabled

  Tabs (Option 10)

  

  • userChrome.Tabs.Option10.Enabled

  Tabs (Option 11)

  

  • userChrome.Tabs.Option11.Enabled

  Tabs (Option 12)

  

  • userChrome.Tabs.Option12.Enabled

  Tabs (Option 13)

  

  • userChrome.Tabs.Option13.Enabled

Go to the chrome folder and paste the desired styles inside the third_party_custom_styles.css file. Please note that this file has maximum execution priority. It will overwrite all styles, regardless of selector specificity. I make no guarantees of compatibility and will not resolve any style conflicts you may encounter.

• userChrome.Style.ThirdParty.Enabled

Functionality that will not be part of the style will be published in the discussions section as requests from users.

Requires Linux with transparency support. Works only with the system theme.

• userChrome.Linux.Transparency.Low.Enabled
• userChrome.Linux.Transparency.Medium.Enabled
• userChrome.Linux.Transparency.High.Enabled
• userChrome.Linux.Transparency.VeryHigh.Enabled
• browser.tabs.inTitlebar > 1 (Required key)

Works only with the system theme.

• userChrome.Toolbar.Transparency.Low.Enabled
• userChrome.Toolbar.Transparency.Medium.Enabled
• userChrome.Toolbar.Transparency.High.Enabled
• userChrome.Toolbar.Transparency.VeryHigh.Enabled

Incompatible with AMO themes.

• userChrome.LightTheme.Tabs.Borders.Saturation.Low.Enabled
• userChrome.LightTheme.Tabs.Borders.Saturation.Medium.Enabled
• userChrome.LightTheme.Tabs.Borders.Saturation.High.Enabled
• userChrome.LightTheme.Tabs.Borders.Saturation.VeryHigh.Enabled

• userChrome.DarkTheme.Tabs.Borders.Saturation.Low.Enabled
• userChrome.DarkTheme.Tabs.Borders.Saturation.Medium.Enabled
• userChrome.DarkTheme.Tabs.Borders.Saturation.High.Enabled
• userChrome.DarkTheme.Tabs.Borders.Saturation.VeryHigh.Enabled

• userChrome.LightTheme.Tabs.Shadows.Saturation.Low.Enabled
• userChrome.LightTheme.Tabs.Shadows.Saturation.Medium.Enabled
• userChrome.LightTheme.Tabs.Shadows.Saturation.High.Enabled
• userChrome.LightTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled

• userChrome.DarkTheme.Tabs.Shadows.Saturation.Low.Enabled
• userChrome.DarkTheme.Tabs.Shadows.Saturation.Medium.Enabled
• userChrome.DarkTheme.Tabs.Shadows.Saturation.High.Enabled
• userChrome.DarkTheme.Tabs.Shadows.Saturation.VeryHigh.Enabled

• userChrome.TabSeparators.Saturation.Low.Enabled
• userChrome.TabSeparators.Saturation.Medium.Enabled

By default context menus follow the selected interface density, but it is possible to set a fixed size.

Compact	Normal	Touch

• userChrome.Menu.Size.Compact.Enabled
• userChrome.Menu.Size.Normal.Enabled
• userChrome.Menu.Size.Touch.Enabled

Regular	Filled

• userChrome.Menu.Icons.Regular.Enabled
• userChrome.Menu.Icons.Filled.Enabled

Icons from Lepton.css are now available. Please note that this is third-party code. I am not its author and do not support it. I will not solve any problems associated with these icons. They were added at the request of some users and work "As is". I will update this code according to the original source.

• svg.context-properties.content.enabled
• userChrome.Menu.Icons.LeptonIcons.Enabled
  • userChrome.icon.panel_full or userChrome.icon.panel_photon
  • userChrome.icon.library
  • userChrome.icon.panel
  • userChrome.icon.menu
  • userChrome.icon.context_menu
  • userChrome.icon.global_menu
  • userChrome.icon.global_menubar
  • userChrome.icon.1-25px_stroke
  • userChrome.icon.account_image_to_right
  • userChrome.icon.account_label_to_right
  • userChrome.icon.menu.full
  • userChrome.icon.global_menu.mac

• userChrome.DragSpace.Left.Disabled
• userChrome.DragSpace.Right.Disabled
• userChrome.DragSpace.Top.Windowed.Enabled
• userChrome.DragSpace.Top.Maximized.Enabled
• userChrome.DragSpace.Top.Fullscreen.Enabled

• userChrome.Tabs.Pinned.Width.LowOffset.Enabled
• userChrome.Tabs.Pinned.Width.HighOffset.Enabled

• userChrome.Tabs.SelectedTabIndicator.Enabled

• userChrome.Tabs.TabsOnBottom.Enabled
• browser.tabs.inTitlebar (Required key. Set the value to 0)

• userChrome.OneLine.TabBarFirst.Enabled
• userChrome.OneLine.NavBarFirst.Enabled

• Minimum Requirements

  • Firefox 115 ESR
  • Windows / MacOS / Linux

• Download the chrome folder and put it in your user profile folder

• Go to about:config and activate the keys below

  • toolkit.legacyUserProfileCustomizations.stylesheets
  • layout.css.has-selector.enabled
  • svg.context-properties.content.enabled

• Specify the desired shape of the tabs

  Tabs (Option 1)

  

  • userChrome.Tabs.Option1.Enabled

  Tabs (Option 2)

  

  • userChrome.Tabs.Option2.Enabled

  Tabs (Option 3)

  

  • userChrome.Tabs.Option3.Enabled

  Tabs (Option 4)

  

  • userChrome.Tabs.Option4.Enabled

  Tabs (Option 5)

  

  • userChrome.Tabs.Option5.Enabled

  Tabs (Option 6)

  

  • userChrome.Tabs.Option6.Enabled

  Tabs (Option 7)

  

  • userChrome.Tabs.Option7.Enabled

  Tabs (Option 8)

  

  • userChrome.Tabs.Option8.Enabled

  Tabs (Option 9)

  

  • userChrome.Tabs.Option9.Enabled

  Tabs (Option 10)

  

  • userChrome.Tabs.Option10.Enabled

  Tabs (Option 11)

  

  • userChrome.Tabs.Option11.Enabled

  Tabs (Option 12)

  

  • userChrome.Tabs.Option12.Enabled

Works with modern versions of Windows 11 / Windows 10. System effects must be supported on the operating system side. Otherwise, you need third-party software, such as Mica For Everyone. You also need to disable the accent color in the operating system settings, if it was enabled. Works only with the system theme.

Download and install Mica For Everyone from here.

• userChrome.Windows.SystemEffects.Enabled

Works only with the system theme.

• userChrome.Toolbar.Transparency.Low.Enabled
• userChrome.Toolbar.Transparency.Medium.Enabled
• userChrome.Toolbar.Transparency.High.Enabled
• userChrome.Toolbar.Transparency.VeryHigh.Enabled

Requires Linux with transparency support. Works only with the system theme.

• userChrome.Linux.Transparency.Enabled
• gfx.webrender.all (Required key)

The tab frame consists of type, color and saturation. Not compatible with themes that use a translucent toolbar.

• userChrome.LightTheme.TabFrameType.Border.Enabled
• userChrome.LightTheme.TabFrameType.Shadow.Enabled

• userChrome.LightTheme.TabFrameColor.Auto.Enabled
• userChrome.LightTheme.TabFrameColor.White.Enabled
• userChrome.LightTheme.TabFrameColor.Black.Enabled

• userChrome.LightTheme.TabFrameSaturation.Low.Enabled
• userChrome.LightTheme.TabFrameSaturation.Medium.Enabled
• userChrome.LightTheme.TabFrameSaturation.High.Enabled
• userChrome.LightTheme.TabFrameSaturation.VeryHigh.Enabled

• userChrome.DarkTheme.TabFrameType.Border.Enabled
• userChrome.DarkTheme.TabFrameType.Shadow.Enabled

• userChrome.DarkTheme.TabFrameColor.Auto.Enabled
• userChrome.DarkTheme.TabFrameColor.White.Enabled
• userChrome.DarkTheme.TabFrameColor.Black.Enabled

• userChrome.DarkTheme.TabFrameSaturation.Low.Enabled
• userChrome.DarkTheme.TabFrameSaturation.Medium.Enabled
• userChrome.DarkTheme.TabFrameSaturation.High.Enabled
• userChrome.DarkTheme.TabFrameSaturation.VeryHigh.Enabled

• userChrome.TabSeparatorsLowSaturation-Enabled
• userChrome.TabSeparatorsMediumSaturation-Enabled

By default context menus follow the selected interface density, but it is possible to set a fixed size.

Compact	Normal	Touch

• userChrome.CompactContextMenu-Enabled
• userChrome.NormalContextMenu-Enabled
• userChrome.TouchContextMenu-Enabled

Regular	Filled

• userChrome.RegularMenuIcons-Enabled
• userChrome.FilledMenuIcons-Enabled

• userChrome.DragSpace.Left.Disabled
• userChrome.DragSpace.Right.Disabled
• userChrome.DragSpace.Top.Windowed.Enabled
• userChrome.DragSpace.Top.Maximized.Enabled
• userChrome.DragSpace.Top.Fullscreen.Enabled

• userChrome.PinnedTabsWidthLowIncrease-Enabled
• userChrome.PinnedTabsWidthHighIncrease-Enabled

• userChrome.Tabs.SelectedTabIndicator.Enabled

• userChrome.OneLine.TabBarFirst.Enabled
• userChrome.OneLine.NavBarFirst.Enabled
• browser.tabs.inTitlebar (Enable this key if there are problems with window control buttons. Set the value to 0)

Low values are more suitable for high resolution monitors.

• userChrome.OneLine.NavBarWidth.Low.Enabled
• userChrome.OneLine.NavBarWidth.Medium.Enabled
• userChrome.OneLine.NavBarWidth.High.Enabled

• userChrome.TabsOnBottom-Enabled
• browser.tabs.inTitlebar (Required key. Set the value to 0)

• KDE Plasma 5
• KDE Plasma 6
• GNOME

Open userChrome.css and paste your code under the appropriate comment. Your code has the highest priority by default.

• browser.theme.windows.accent-color-in-tabs.enabled

• widget.windows.mica
  • widget.windows.mica.toplevel-backdrop > 0 or 1 or 2 or 3 (Auto / Mica / Acrylic / MicaAlt)
• widget.windows.mica.popups > 0 or 1 or 2 (Disabled / Enabled / Auto)

• browser.theme.native-theme
• widget.macos.titlebar-blend-mode.behind-window
• widget.macos.sidebar-blend-mode.behind-window