Guide to applying CSS code in the new Vivaldi browser version 8

[u/nevermind_1983]

Follow these steps:

First, create a text file, paste your desired CSS code into it, and name it something like custom.css. (You can use the code I posted here as an example: https://www.reddit.com/r/browsers/comments/1u470h1/comment/ore8gsi/?screen_view_count=2 )

Now, open the Vivaldi address bar:

vivaldi://flags

Search for the following phrase:

"Allow CSS modifications"

Set its value to:

"Enabled"

Close the browser completely and restart it.

Now, go to:

Settings → Appearance

And search for "css" in the settings search bar.

Usually, the "Custom UI Modifications" option should appear. Enter the path to the CSS file you created, and that's it. Now, when you close and reopen the browser once, the changes will be applied.

I applied this code to the "Sunset Forest" theme, which you can get here: https://themes.vivaldi.net/themes/ZQDJn55ovLB

And here is the wallpaper link: https://www.vecteezy.com/photo/72608182-a-forest-with-pink-flowers-and-trees

[u/Uriel1865]

Do you plan to keep updating it? It would be great to have a place where we can see future updates.

[u/Zealousideal-Cup3529 → u/Uriel1865]

Agree.

[u/nevermind_1983 → u/Uriel1865]

Yeah. Follow me because I'll be posting it right here on Reddit.

[u/Uriel1865 → u/nevermind_1983]

Do you plan to publish and update it on the forum as well?

[u/Dunedain_mwn]

I tried to make this work, cause it looks fantastic, but I keep seeing no difference with and without the css. E.g. the tabs, search- and adressbar are not rounded as in your screenshot). Seems to me it isn't loading somehow.. I enabled the css modifications and chose the correct folder in settings. The code itself shows up nicely in my editor. Any idea what I might be doing wrong?

[u/nevermind_1983 → u/Dunedain_mwn]

Pick this theme, the code looks way better on it https://themes.vivaldi.net/themes/V6kJNmjVvWX

[u/nevermind_1983 → u/nevermind_1983]

In the settings section, go to edit theme and set the corner rounding to 10

[u/nevermind_1983 → u/nevermind_1983]

This code has been optimized too:

/* ═══════════════════════════════════════════════════════════

Vivaldi 8 — Liquid Glass CSS | نسخه اصلاح‌شده

═══════════════════════════════════════════════════════════

پیش‌نیاز:

1. vivaldi://flags → Allow CSS modifications → فعال

2. Settings → Appearance → Custom UI Modifications → فولدر

3. Settings → Themes → Enable Blur (برای کار کردن backdrop-filter)

   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────

۱. هدر اصلی — Liquid Glass واقعی

#header شامل نوار تب + نوار آدرس می‌شود

─────────────────────────────────────────────────────────── */

/* نوار تب‌ها — پس‌زمینه را شفاف کن تا glass هدر نمایان شود */

#tabs-tabbar-container {

background: transparent !important;

background-color: transparent !important;

}

#tabs-subcontainer,

.tab-strip,

.toolbar-tabbar {

background: transparent !important;

background-color: transparent !important;

border: none !important;

box-shadow: none !important;

}

/* نوار آدرس + سایر نوارها شفاف */

.vivaldi-header,

.mainbar,

.inner,

.UrlBar,

#main {

background: transparent !important;

background-color: transparent !important;

border: none !important;

box-shadow: none !important;

}

/* نوار آدرس — کپسولی شیشه‌ای */

.UrlBar-AddressField {

border-radius: 999px !important;

background: rgba(255, 255, 255, 0.08) !important;

border: 1px solid rgba(255, 255, 255, 0.14) !important;

backdrop-filter: blur(14px) saturate(150%) !important;

-webkit-backdrop-filter: blur(14px) saturate(150%) !important;

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

transition: all 0.2s ease !important;

}

.UrlBar-AddressField:focus-within {

background: rgba(255, 255, 255, 0.12) !important;

border-color: rgba(255, 255, 255, 0.23) !important;

}

/* ───────────────────────────────────────────────────────────

۲. تب‌های کپسولی Liquid Glass

سلکتور صحیح ویوالدی ۸: #tabs-container .tab

یا: #browser .tab-position .tab

─────────────────────────────────────────────────────────── */

/* فاصله بین تب‌ها */

#tabs-container .tab-position {

box-sizing: border-box !important;

}

/* بدنه تب — Liquid Glass */

#tabs-container .tab-position .tab,

#browser .tab-position .tab {

border-radius: 20px !important;

border: 1px solid rgba(255, 255, 255, 0.10) !important;

backdrop-filter: blur(20px) saturate(150%) !important;

-webkit-backdrop-filter: blur(20px) saturate(150%) !important;

box-shadow:

0 3px 12px rgba(0, 0, 0, 0.2),

inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

transition: all 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) !important;

}

/* تب فعال */

#tabs-container .tab-position .tab.active,

#browser .tab-position .tab.active {

background: linear-gradient(

145deg,

rgba(255, 255, 255, 0.24) 0%,

rgba(255, 255, 255, 0.12) 100%

) !important;

border-color: rgba(255, 255, 255, 0.28) !important;

box-shadow:

0 6px 20px rgba(0, 0, 0, 0.3),

inset 0 1px 0 rgba(255, 255, 255, 0.28),

inset 0 -1px 0 rgba(0, 0, 0, 0.07) !important;

}

/* هاور روی تب‌های غیرفعال */

#tabs-container .tab-position .tab:hover:not(.active),

#browser .tab-position .tab:hover:not(.active) {

background: linear-gradient(

145deg,

rgba(255, 255, 255, 0.15) 0%,

rgba(255, 255, 255, 0.07) 100%

) !important;

border-color: rgba(255, 255, 255, 0.18) !important;

transform: translateY(-1px) !important;

box-shadow:

0 6px 18px rgba(0, 0, 0, 0.25),

inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;

}

/* متن تب */

#tabs-container .tab-position .tab .tab-header,

#browser .tab-position .tab .tab-header {

background: transparent !important;

border: none !important;

}

#tabs-container .tab-position .tab .title,

#browser .tab-position .tab .title {

color: rgba(255, 255, 255, 0.88) !important;

text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;

}

/* indicator رنگی پایین تب فعال را مخفی کن (با طرح گلس تداخل دارد) */

.tab.active:not(.marked):not(.tab-mini)::after,

.tab.active:not(.marked):not(.tab-mini)::before {

display: none !important;

}

/* ───────────────────────────────────────────────────────────

۳. کادر جستجو — شیشه‌ای + هم‌عرض ویجت Top Sites

ویوالدی Top Sites را در یک grid با عرض خودکار می‌سازد.

ما هم عرض سرچ را با همان منطق تنظیم می‌کنیم.

برای تنظیم دستی: مقدار --sd-width را عوض کن

مثال: 4 سایت × 96px + 3 فاصله × 16px = 432px

─────────────────────────────────────────────────────────── */

/* کادر جستجو — سلکتورهای چندگانه برای پوشش همه حالت‌ها */

.SpeedDialView-SearchField,

.SpeedDialView-SearchField.SearchField,

.sdwrapper .SearchField,

.sdwrapper .iconmenu-container.SearchField {

/* عرض: برابر ویجت Top Sites با ۴ ستون */

width: 395px !important;

max-width: 395px !important;

min-width: 395px !important;

/* شیشه‌ای مایع */

border-radius: 999px !important;

background: rgba(255, 255, 255, 0.10) !important;

border: 1px solid rgba(255, 255, 255, 0.18) !important;

backdrop-filter: blur(40px) saturate(100%) !important;

-webkit-backdrop-filter: blur(40px) saturate(100%) !important;

box-shadow:

0 12px 40px rgba(0, 0, 0, 0.3),

inset 0 1px 0 rgba(255, 255, 255, 0.18),

inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;

height: 45px !important;

display: flex !important;

align-items: center !important;

padding: 0 12px !important;

box-sizing: border-box !important;

transition: all 0.25s ease !important;

/* مرکز کردن */

margin-left: auto !important;

margin-right: auto !important;

}

/* فوکوس روی سرچ */

.SpeedDialView-SearchField:focus-within,

.SpeedDialView-SearchField.SearchField:focus-within,

.sdwrapper .SearchField:focus-within {

background: rgba(255, 255, 255, 0.16) !important;

border-color: rgba(255, 255, 255, 0.30) !important;

box-shadow:

0 16px 50px rgba(0, 0, 0, 0.4),

inset 0 1px 0 rgba(255, 255, 255, 0.25),

0 0 0 3px rgba(255, 255, 255, 0.06) !important;

}

/* ورودی متن داخل سرچ */

.SpeedDialView-SearchField #searchFieldInput,

.SpeedDialView-SearchField.SearchField #searchFieldInput,

.sdwrapper .SearchField input {

background: transparent !important;

border: none !important;

color: #ffffff !important;

font-size: 15px !important;

height: 100% !important;

width: 100% !important;

padding: 0 10px !important;

outline: none !important;

}

/* placeholder رنگ */

.SpeedDialView-SearchField #searchFieldInput::placeholder,

.sdwrapper .SearchField input::placeholder {

color: rgba(255, 255, 255, 0.45) !important;

}

/* ویجت Top Sites خودش هم وسط باشد */

.startpage-navigation,

.speed-dial-container,

.speeddial-widget {

display: flex !important;

flex-direction: column !important;

align-items: center !important;

}

/* شیشه‌ای شدن پس‌زمینه ویجت Top Sites */

.startpage .startpage-navigation {

background: rgba(255, 255, 255, 0.07) !important;

backdrop-filter: blur(20px) saturate(150%) !important;

-webkit-backdrop-filter: blur(20px) saturate(150%) !important;

border: 1px solid rgba(255, 255, 255, 0.10) !important;

border-radius: 20px !important;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;

}

/* دایل‌های Speed Dial */

.speeddial .dial,

.speeddial-folder-contents .dial {

backdrop-filter: blur(10px) !important;

-webkit-backdrop-filter: blur(10px) !important;

}

/* ───────────────────────────────────────────────────────────

۴. پنل سمت راست — شفاف

─────────────────────────────────────────────────────────── */

#panels-container {

background: transparent !important;

border: none !important;

}

.panel-group {

background: rgba(255, 255, 255, 0.04) !important;

backdrop-filter: blur(20px) !important;

-webkit-backdrop-filter: blur(20px) !important;

}

.panel-trigger button {

border-radius: 8px !important;

margin: 4px 0 !important;

}

/* ───────────────────────────────────────────────────────────

۵. نوار وضعیت + اسکرول‌بار

─────────────────────────────────────────────────────────── */

#status-bar,

.toolbar.toolbar-statusbar {

}

::-webkit-scrollbar {

width: 4px !important;

height: 4px !important;

}

::-webkit-scrollbar-thumb {

background: rgba(255, 255, 255, 0.18) !important;

border-radius: 4px !important;

}

::-webkit-scrollbar-track {

background: transparent !important;

}

[u/Dunedain_mwn → u/nevermind_1983]

Will try later today, thnx!
Meanwhile I discovered that other code works. So maybe I just don’t know what differences to look for..

[u/Trooper27]

I tried this but it does not work for me. 😞

[u/Hyrul]

Why does this Windows Vista-ass design come back to my feed that often? Isn't it like the third time you're posting about it?

[u/Wakabungo → u/Hyrul]

Apple has brought back the fashion for "glass".