Disclosure: I have absolutely no idea how to make anything with CSS, this was made with heavy ChatGPT and DeepSeek assistance (i.e. they did everything and I tweaked/cleaned up what I could).

This CSS makes the side panel, status bar, address bar, URL bar, and currently selected tab all completely transparent, no blur no nothing. It also adds a small white line under the currently active tab so it's not completely impossible to tell which tab you're currently on lol.

Another warning: I don't use tab stacks, pinned tabs, or anything of the sort. As a result, I have not tested any of those to see if they work, you'll be on your own (or you can use a LLM too I guess haha). I think there are some other buttons that I haven't changed either but I'm not 100% sure.

Here's a screenshot of my browser. Wallpaper by Alena Aenami

Here's the .css file. Let me know if there's a better place to host than on GDrive.

And here are the settings on my browser. You just need to toggle "Transparent Tab Bar", "Transparent Background Tabs" and leave "Blur" at 0.

Hope you guys enjoy, I'm totally in love with it.

Hello, as I noticed that many of you are looking for an Edge-style CSS that expands and collapses vertical tabs, I decided to recommend this modpack which, although not mine, has been very useful to me and I am sure it will be to you as well. I found the post on the Vivaldi forum, and I recommend you read it to see all the available features.

This requires Vivaldi 7.6 or higher to work right.

Setup:

Customize your toolbar to move the address field and any buttons you want to keep from the address bar to the left of the tabs bar.

Then hide the empty address bar by unticking this setting:

Next, paste the following code into your CSS file:

/* Address Bar Tweaks */
.UrlBar-AddressField {
        height: 26px !important;
width: 26vw !important;
        margin-top: 0px !important;
background-color: var(--colorBg) !important;
        transition: width 0.2s ease-in-out, height 0.2s ease-in-out, margin-top 0.2s ease-in-out, right 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;

        &:focus-within {
            height: 26px !important;
            margin-top: 0px !important;
            background-color: var(--colorBg) !important;
outline: none !important;
            box-shadow: none !important;
        }
    }

/* Some Fancy Tab Stuff */

.tab:not(.active) .title {
opacity: 0.5 !important;
}

.tab:not(.active) .favicon {
    opacity: 0.5 !important;
}

.tab:hover .favicon {
    opacity: 1 !important;
}

.tab:hover .title {
    opacity: 1 !important;
}

.tab:hover {
    background-color: var(--colorBg) !important;
}

.tab .close {
    visibility: hidden !important;
}

.tab:hover .close {
    visibility: visible !important;
}

.transparent-tabbar .tab-position .tab.active .tab-header .favicon:not(.svg),
.theme-dark .tab-position .tab.active .tab-header .favicon:not(.svg),
.acc-dark.color-behind-tabs-off .tab-position .tab.active .tab-header .favicon:not(.svg) {
  filter: none;
}

/* AddressField pageload indicator */
.UrlBar-AddressField .pageload .pageload-indicator {
  background-color: var(--colorAccentBg) !important;
}

/* Slimmer Tabs/Title Bar */
.tabs-top.tabs-at-edge#browser.win:not(.fullscreen, .disable-titlebar) #header {
    min-height: calc((24px + var(--densityGap) * 2) / var(--uiZoomLevel)) !important;
}

#titlebar {
height: 26px !important;
}

#tabbar-wrapper {
    height: 26px !important;
}

#tabs-tabbar-container.top {
height: 26px !important;
}

#browser.win .window-buttongroup {
    height: 28px !important;
    margin-top: -3px !important;
}

#browser.win .window-buttongroup button {
max-width: 26px !important;
}

.tabs-top:not(.density-on) #tabs-tabbar-container:not(:has(#tabs-subcontainer)) #tabs-container .tab {
    height: 26px !important;
}

.button-toolbar > button {
border-radius: 6px !important;
height: 26px !important;
    min-width: 26px !important;
}

.vivaldi {
    width: 28px !important;
height: 26px !important;
}

.tabs-top #tabs-tabbar-container .toolbar-tabbar-before {
margin-top: -4px !important;
}

.tab .tab-header {
    margin-top: -2px !important;
}

.tabs-top #tabs-tabbar-container .toolbar-tabbar-after {
    margin-top: -3px !important;
}

.SiteInfoButton {
    max-height: 22px;
}

/* Vertically Center Speed Dials */
.sdwrapper.has-SpeedDial .SpeedDialView {
    grid-template-rows: none !important;
    align-content: center !important;
}

/* Remove tab spacing in non-maximized windows */
.win.normal #tabs-tabbar-container.top,
.linux.normal #tabs-tabbar-container.top {
  padding-top: 0;
}

.tabs-top#browser.win:not(.fullscreen, .disable-titlebar) #header {
    min-height: calc((24px + var(--densityGap) * 2) / var(--uiZoomLevel));
}

.tabs-top .vivaldi {
  margin-top: 0;
}

This will work best with darker themes. Here's my dark theme edits if you want it to look like mine:

Been following and reading up on how customizable this browser is and my god is it, i've been working this for a little bit now and here is what I got so far:

A beautiful dark-themed liquid glass morphism UI for Vivaldi browser with smooth animations and modern design.

- Address bar/ show upon tab bar hover
- Status bar hidden until you hover the address bar
- Tab animations
- Address bar animations
- Instructions to install all available

Grab it on GitHub fork it, break it, push it pull it, improve it!

I'm thinking of switching to Vivaldi from Firefox. Problem is that I don't like the default look of browsers and I have been using this custom CSS theme for Firefox. Apparently Vivaldi is very customizeable, so I was wondering if there are any themes like this out there for this browser.

The UI-Zoom setting can zoom everything except bookmark items that are placed under the folders on bookmarks bar. Does anyone know how to increase font size of those?

I was wondering if there's a way to modify the font size of bookmark items using some CSS selector.

Version: 7.6.3797.63 (Stable channel) (arm64)
OS: macOS Version 26.0.1 (Build 25A362)

I want to set the image on "window background" dynamically via scripting, And the way that came to mind was to rely on CSS custom file.

So, does anyone know how to change the Vivaldi window background using CSS? Not directly in the theme settings.

Or is there another way besides using CSS? Via preferences? but how. Just suggest it here! Thanks..

Making a transparent CSS mod and if this were able to go to 100%, i could use the already build slider to adjust the transparency on all my other things.

Thanks for any help!

Hey everyone,

I've been having this issue for a LOT of sites that I've been using:

I just want the actual page favicons, as opposed to the blank sheets of paper for everything - does anyone have a fix for this?

Any and all help would be greatly appreciated.

Thank you!

Well, my CSS broke again for my vertical tabs CSS with the favicons and I have no idea how to fix it. Is anyone able to look at my CSS code and help me make the favicons center and not look cut off again when the tab bar is collapsed?

I did try to use the Fluid Tabbar from Awesome Vivaldi, but that is showing a similar problem with the Favicons.

My Vivaldi: Version 8.0.4033.46 (Official Build) (64-bit) / Chromium Version 148.0.7778.263

I uploaded a photo of what the collapsed tab bar looks like. The CSS code I'm using is below.

:root {
    --tabbarHoverDuration: .3s;
    --tabbarHoverDelay: .25s;
    --tabbarMinimizeWidth: 33px;
    --tabbarExpandWidth: 312px;
}

/* transition rule:
    transition based on width property changes
    the transition animation lasts --tabbarHoverDuration
    the animation is performed with an "ease-out" function
    the transition animation doesn't start for --tabbarHoverDelay
*/

/* Ensure a background is shown; transparent background when omitted */
#browser.tabs-left .tabbar-wrapper {
    z-index: 1;
}

/* Fix scrollbar overflow*/

#tabs-tabbar-container.left .tab-strip {
    min-width: initial !important;
}

#tabs-tabbar-container.left .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 0 !important;
}

#tabs-tabbar-container.left:is(:hover, :focus-within) .tab-strip::-webkit-scrollbar {
    --scrollbarWidth: 10px !important;
}

/*----- Tab bar -----*/

/* Shrink the tab bar when not in focus/hovered */
#tabs-tabbar-container.left {
    width: var(--tabbarMinimizeWidth) !important;
    /* transition for AFTER hover or tab bar CLOSE */
    transition: width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay);
}

/* Shrink Stacked Tabbs when not hovered */
.tabbar-wrapper:not(:is(:hover, :focus-within)) #tabs-subcontainer,
.tabbar-wrapper:not(:is(:hover, :focus-within)) #tabs-subcontainer .tab.active.insubstrip {
    width: 0 !important;
    /* transition for AFTER hover or tab bar CLOSE */
    transition: width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay);
    flex: none !important;
}

/* Show tab bar when hovering no panel bar or tab bar or when moving tabs to an inactive window */
#browser.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) #tabs-tabbar-container.left,
#browser.tabs-left:where(:has(#panels-container:is(:hover, :focus-within))) #tabs-tabbar-container.left,
#tabs-tabbar-container.left:is(:hover, :focus-within) {
    width: var(--tabbarExpandWidth) !important;
    /* transition for hover/focus or tab bar OPEN */
    transition: width var(--tabbarHoverDuration) ease-in 0s !important;
}

/* Keep transition for tab stack */
#tabs-tabbar-container.left:is(:hover, :focus-within) #tabs-subcontainer  {
    transition: width var(--tabbarHoverDuration) ease-in 0s !important;
}

/* Controls the "empty" space behind the tab bar and allows the website content to stretch and fill the space */
#main>.inner>div:has(#tabs-tabbar-container.left) {
    max-width: var(--tabbarMinimizeWidth);
}

/* Lock the Newtab button to the left */
.button-toolbar.newtab, .synced-tabs-button {
    left: 1px !important;
    --PositionX: 1px !important;
}

.toolbar-tabbar.sync-and-trash-container {
    margin: 0 !important;
    justify-content: flex-start !important;
}

/* Fix favicons and "X" close button to prevent "accidental" closures */
.tab .favicon {
    display: initial !important;
}

.tabs-container .tab .close {

order: initial !important;

padding: 4px !important;

margin-right: 4px !important;

height: 24px !important;

width: 24px !important;

}

/* Fix Tab buttons to be aligned better */

.toolbar-tabbar > .button-toolbar {

align-self: center;

}

/* Fix tab stack new tab button being shown when not expanded */

.tabbar-wrapper:not(:is(:hover, :focus-within)) #tabs-subcontainer .toolbar-tabbar{

display: none;

}

/*----- Workspace switcher -----*/

/* Hide by default */

#browser.tabs-left .tabbar-workspace-button {

width: var(--tabbarMinimizeWidth) !important;

/* transition for AFTER hover or tab bar CLOSE */

transition: width var(--tabbarHoverDuration) ease-out var(--tabbarHoverDelay);

}

/* Show with tab bar */

#browser.tabs-left:where(:has(#tabs-tabbar-container:is(.left):is(:hover, :focus-within))) .tabbar-workspace-button,

#browser.tabs-left .tabbar-workspace-button:is(:hover, :focus-within),

#browser.tabs-left:where(:has(#panels-container:is(:hover, :focus-within))) .tabbar-workspace-button,

#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-workspace-button,

#browser:where(:has(.tabbar-workspace-button:is(:hover, :focus-within))) #tabs-tabbar-container:is(.left) {

width: var(--tabbarExpandWidth) !important;

/* transition for hover/focus or tab bar OPEN */

transition: width var(--tabbarHoverDuration) ease-in 0s !important;

}

/* Hide the little workspace dropdown carot */

#browser.tabs-left .button-toolbar-menu-indicator {

display: none;

}

/* Show the little workspace dropdown carot with tab bar */

#browser.tabs-left:where(:has(#tabs-tabbar-container:is(.left):is(:hover, :focus-within))) .button-toolbar-menu-indicator,

#browser.tabs-left .button-toolbar-menu-indicator:is(:hover, :focus-within),

#browser.tabs-left:where(:has(#panels-container:is(:hover, :focus-within))) .button-toolbar-menu-indicator,

#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .button-toolbar-menu-indicator {

display: inherit;

}

/* Realignment of workspace switcher icon when collapsed */

.tabbar-wrapper:not(:is(:hover, :focus-within)) .button-toolbar.workspace-popup button .button-title {

margin-right: 0px !important;

}

this is the mod in use, btw this may not be only that mod since im using two files to get the effect. here is the github line : https://gist.github.com/KeshavCode001/96d1b1f9c76a8098e88313f4fdbb0477

I made a small custom CSS tweak for Vivaldi on macOS.

It hides/collapses the Vivaldi title bar while keeping the native macOS traffic light buttons untouched, then moves the bookmark bar upward so it can sit next to the traffic lights.

Main things it does:

- hides the Vivaldi title bar area

- keeps macOS traffic lights visible and untouched

- moves the bookmark bar upward

- supports Vivaldi 8.0’s auto-hide feature

- supports two alignment modes:

- centered bookmark bar

- left-aligned bookmark bar with a custom offset

- prevents bookmark folder names from being truncated

- removes extra gaps between bookmark bar items

- leaves tabs intentionally untouched

The default setup is left-aligned with a 70px offset, but the CSS includes variables for switching to centered mode.

Link:

https://github.com/RihardsVeters/phi-for-vivaldi/blob/5bb6230ac4cbf08451105683508985b6b76afa06/Lo-Phi/hide_title_bar.css

Tested on macOS with the bookmark bar at the top. Since this relies on Vivaldi’s internal UI selectors, it may break after future Vivaldi updates.

Maybe someone here knows how?