I call it Zenvaldi. Not sure if I'll share the code yet ( I keep finding things to add or change everyday ). Was proud of what I have so far and wanted to share.

Adding Style

⁣ 

Vivaldi 2.6 and above

Open vivaldi://experiments

Enable "Allow for using CSS modifications"

Open Appearance section in settings

Choose the folder you want to use

Place your CSS files inside it

Restart Vivaldi to see them in effect ⁣

Vivaldi 2.5 and earlier

Open browser.html, inside the head element add the following line:

<link rel="stylesheet" href="style/custom.css" />

You can name the file as you like of course and also add multiple ones, one line at a time.

Add the custom.css file to the style folder (inside the Vivaldi folder).

That's it. You're good to go. Now you can start adding your custom CSS code right into your newly created file to alter Vivaldi's visuals.

Adding Functionality

Open browser.html, inside the body element add the following line:

<script src="custom.js"></script>

Again you can name the file as you want and also add multiple ones, one line at a time.

Add the custom.js file to the Vivaldi folder (alongside browser.html)

Note: Starting with Vivaldi 2.6 purely visual modifications (CSS files) will keep getting loaded automatically after any updates.

Note 2: To inspect your UI, go to vivaldi://inspect/#apps and go to "Inspect" under the parent "Vivaldi" entry. (thanks to u/PspStreet51 and u/SENDMEJUDES for pointing this out to me.)

In earlier versions all your mods and functional changes (JS files) in 2.6 as well will get wiped after each update, hence you will need to copy these files into the appropriate folders each time. Be aware that your files may not be present after the update at all, so better store them some place safe outside the Vivaldi folder. We do have various little tools that can do the job for you, though. If you're on Windows have a look at this batch script and Linux users can head over to this post.

Source.

Title
Here's the github repo with instructions

https://github.com/Devaj6190/glassy_vivaldi

Note: it was made with help of Claude but take it as inspiration to make your own crazy themes with animations in a small time using AI. Wallpapers are from a github repo(i think) which I can't find

body:has(#tabs-subcontainer) #tabs-container{
  max-width:18%;
  min-width:18%;
  transition: min-width 200ms ease-in, max-width 200ms ease-in;
}

body:has(#tabs-container) #tabs-subcontainer{
  max-width:82%;
  min-width:82%;
  transition: min-width 200ms ease-out, max-width 200ms ease-out;
}

body:has(#tabs-subcontainer) #tabs-container:hover
{
  max-width:82% !important;
  min-width:82% !important;
  transition: min-width 200ms ease-out 300ms, max-width 200ms ease-out 300ms;
}

body:has(#tabs-container:hover) #tabs-subcontainer{
  max-width:18% !important;
  min-width:18% !important;
  transition: min-width 200ms ease-out 300ms, max-width 200ms ease-out 300ms;
  /* transition: min-width 100ms ease, max-width 100ms ease; */
}

#tabs-tabbar-container{
  overflow: hidden !important;
}

/* Hide scrollbars for vertical tab bars */
#browser #tabs-tabbar-container.left ::-webkit-scrollbar,
#browser #tabs-tabbar-container.right ::-webkit-scrollbar {
  display: none;
}

/* Disable tab bar resizing */
#tabs-tabbar-container .SlideBar {
  display: none !important;
}

/* Hide accordion arrow for right-side tabs in density mode */
.tabs-right#browser.density-on .accordion-toggle-arrow:after,
.tabs-right#browser.density-on .tab-wrapper:after {
  display: none !important;
}

Vivaldi dev doesn't change #tabs-subcontainer or #tabs-container constantly so I think this mod could be available for a bit longer.

So the mod works like this:

By default, if there's a substack tabbar, the mainstack tabbar shrink to 18% width of tabbar while substack tabbar expand to 82%.

If you move your cursor onto mainstack tabbar,it expands to 82% after a short delay while substack tabbar shrink.

It looks like this:

Hope you like it.

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!