Scrollbar with color gradient

Forpli · August 24, 2026, 10:40am

Today I saw a nice scrollbar in the Lavanda gtk theme from Vinceliuice. I'd like to create such a scrollbar with gradient for Zorin theme.

In the gkt-4.0 gkt-dark.css file of the Lavanda theme I found those lines:

scrollbar.vertical > range > trough > slider:active {
  background-image: linear-gradient(to top, #6a58f0, #cf54d0);
}

scrollbar.horizontal > range > trough > slider:active {
  background-image: linear-gradient(to right, #6a58f0, #cf54d0);

I would like to have a gradient from the normal grey color of the theme's scrollbar and the accent color of the theme.

How to do that? I´d prefer one solution to put at ~/.config for all Zorin themes with @define color or similar, so that the right color is set for the shade of grey and the accent color of the selected theme and I can use it for all Zorin themes.

Hm...Perhaps it is not such a good idea. I'm not sure if the contrast is high enough to see the color, but I'd like to test it.
I copied the files into ~/.config gtk-dark.css and gkt.css, and it worked. Now all themes show the gradient scrollbar of Lavanda.

Next step is to find out, how to set colors of the selected theme.

Ponce-De-Leon · August 24, 2026, 11:27am

The Colors are the Hex Codes:

Share these to the one's, You want.

Forpli · August 24, 2026, 11:36am

I don't want to set specific colors there which are then the same for all themes, but a placeholder which is already set somewhere in .css, as e.g. a placeholder which picks the accent-color and a placeholder whichs picks a grey color - if that is possible. I don't know how to write that in the line.

Ponce-De-Leon · August 24, 2026, 12:52pm

That is defined in the Zorin Theme Files. You can find it in the gtk.css and gtk-dark.css Files in the gtk-3.0 and gtk-4.0 Folders. In the gtk-3.0 Folders it is in the files at the End and in the gtk-4.0 Folders in the Files at the Beginning.

To show it on Zorin Blur Light as an Example:

gtk-3.0 gtk.css:

/* GTK NAMED COLORS ---------------- use responsibly! */
/*
widget text/foreground color */
@define-color theme_fg_color #123354;
/*
text color for entries, views and content in general */
@define-color theme_text_color #123354;
/*
widget base background color */
@define-color theme_bg_color #eaf0f6;
/*
text widgets and the like base background color */
@define-color theme_base_color white;
/*
base background color of selections */
@define-color theme_selected_bg_color #15a6f0;
/* Tinting in dark variant to avoid a white selection on white page background when highlighting text in Evince when using Grey-Dark theme */
/*
text/foreground color of selections */
@define-color theme_selected_fg_color white;
/*
base background color of insensitive widgets */
@define-color insensitive_bg_color #eaf0f6;
/*
text foreground color of insensitive widgets */
@define-color insensitive_fg_color #7e92a5;
/*
insensitive text widgets and the like base background color */
@define-color insensitive_base_color white;
/*
widget text/foreground color on backdrop windows */
@define-color theme_unfocused_fg_color #7f7f7f;
/*
text color for entries, views and content in general on backdrop windows */
@define-color theme_unfocused_text_color #123354;
/*
widget base background color on backdrop windows */
@define-color theme_unfocused_bg_color #f0f0f0;
/*
text widgets and the like base background color on backdrop windows */
@define-color theme_unfocused_base_color white;
/*
base background color of selections on backdrop windows */
@define-color theme_unfocused_selected_bg_color #15a6f0;
/*
text/foreground color of selections on backdrop windows */
@define-color theme_unfocused_selected_fg_color white;
/*
insensitive color on backdrop windows*/
@define-color unfocused_insensitive_color #cacaca;
/*
widgets main borders color */
@define-color borders #dae2ea;
/*
widgets main borders color on backdrop windows */
@define-color unfocused_borders #e5e5e5;
/*
these are pretty self explicative */
@define-color placeholder_text_color #8999aa;
@define-color warning_color #f88052;
@define-color error_color #fa4444;
@define-color success_color #2ac88d;
/*
these colors are exported for the window manager and shouldn't be used in applications,
read if you used those and something break with a version upgrade you're on your own... */
@define-color wm_title shade(#123354, 1.8);
@define-color wm_unfocused_title #7f7f7f;
@define-color wm_highlight transparent;
@define-color wm_borders_edge rgba(255, 255, 255, 0.8);
@define-color wm_bg_a shade(#eaf0f6, 1.2);
@define-color wm_bg_b #eaf0f6;
@define-color wm_shadow alpha(black, 0.35);
@define-color wm_border alpha(black, 0.18);
@define-color wm_button_hover_color_a shade(#eaf0f6, 1.3);
@define-color wm_button_hover_color_b #eaf0f6;
@define-color wm_button_active_color_a shade(#eaf0f6, 0.85);
@define-color wm_button_active_color_b shade(#eaf0f6, 0.89);
@define-color wm_button_active_color_c shade(#eaf0f6, 0.9);
/* content view background such as thumbnails view in Photos or Boxes */
@define-color content_view_bg white;
/* Very contrasty background for text views (@theme_text_color foreground) */
@define-color text_view_bg white;

gtk-3.0 gtk-dark.css:

/* GTK NAMED COLORS ---------------- use responsibly! */
/*
widget text/foreground color */
@define-color theme_fg_color #bde6fb;
/*
text color for entries, views and content in general */
@define-color theme_text_color #bde6fb;
/*
widget base background color */
@define-color theme_bg_color #222b30;
/*
text widgets and the like base background color */
@define-color theme_base_color #161c1f;
/*
base background color of selections */
@define-color theme_selected_bg_color #add3e7;
/* Tinting in dark variant to avoid a white selection on white page background when highlighting text in Evince when using Grey-Dark theme */
/*
text/foreground color of selections */
@define-color theme_selected_fg_color #161c1f;
/*
base background color of insensitive widgets */
@define-color insensitive_bg_color #222b30;
/*
text foreground color of insensitive widgets */
@define-color insensitive_fg_color #6f8896;
/*
insensitive text widgets and the like base background color */
@define-color insensitive_base_color #161c1f;
/*
widget text/foreground color on backdrop windows */
@define-color theme_unfocused_fg_color #71848d;
/*
text color for entries, views and content in general on backdrop windows */
@define-color theme_unfocused_text_color #bde6fb;
/*
widget base background color on backdrop windows */
@define-color theme_unfocused_bg_color #1e2428;
/*
text widgets and the like base background color on backdrop windows */
@define-color theme_unfocused_base_color #171c1f;
/*
base background color of selections on backdrop windows */
@define-color theme_unfocused_selected_bg_color #bde6fb;
/*
text/foreground color of selections on backdrop windows */
@define-color theme_unfocused_selected_fg_color #161c1f;
/*
insensitive color on backdrop windows*/
@define-color unfocused_insensitive_color #3f4b54;
/*
widgets main borders color */
@define-color borders #2d3940;
/*
widgets main borders color on backdrop windows */
@define-color unfocused_borders #2b343a;
/*
these are pretty self explicative */
@define-color placeholder_text_color #69818d;
@define-color warning_color #faa483;
@define-color error_color #fb7c7c;
@define-color success_color #6ee1b6;
/*
these colors are exported for the window manager and shouldn't be used in applications,
read if you used those and something break with a version upgrade you're on your own... */
@define-color wm_title shade(#bde6fb, 1.8);
@define-color wm_unfocused_title #71848d;
@define-color wm_highlight transparent;
@define-color wm_borders_edge rgba(189, 230, 251, 0.07);
@define-color wm_bg_a shade(#222b30, 1.2);
@define-color wm_bg_b #222b30;
@define-color wm_shadow alpha(black, 0.35);
@define-color wm_border alpha(black, 0.18);
@define-color wm_button_hover_color_a shade(#222b30, 1.3);
@define-color wm_button_hover_color_b #222b30;
@define-color wm_button_active_color_a shade(#222b30, 0.85);
@define-color wm_button_active_color_b shade(#222b30, 0.89);
@define-color wm_button_active_color_c shade(#222b30, 0.9);
/* content view background such as thumbnails view in Photos or Boxes */
@define-color content_view_bg #161c1f;
/* Very contrasty background for text views (@theme_text_color foreground) */
@define-color text_view_bg #161c1f;

gtk-4.0 gtk.css:

/* GTK NAMED COLORS ---------------- use responsibly! */
@define-color accent_bg_color #15a6f0;
@define-color accent_fg_color white;
@define-color accent_color #0d8fd1;
@define-color destructive_bg_color #fa4444;
@define-color destructive_fg_color white;
@define-color destructive_color #f91f1f;
@define-color success_bg_color #2ac88d;
@define-color success_fg_color white;
@define-color success_color #23a877;
@define-color warning_bg_color #f88052;
@define-color warning_fg_color white;
@define-color warning_color #f7652d;
@define-color error_bg_color #fa4444;
@define-color error_fg_color white;
@define-color error_color #fa4444;
@define-color window_bg_color #eaf0f6;
@define-color window_fg_color #123354;
@define-color window_backdrop_color #f0f0f0;
@define-color window_backdrop_fg_color #7f7f7f;
@define-color view_bg_color white;
@define-color view_fg_color #123354;
@define-color view_backdrop_color white;
@define-color view_backdrop_fg_color #7f7f7f;
@define-color headerbar_bg_color @window_bg_color;
@define-color headerbar_fg_color @window_fg_color;
@define-color headerbar_border_color @window_fg_color;
@define-color headerbar_backdrop_color @window_backdrop_color;
@define-color headerbar_backdrop_fg_color @window_backdrop_fg_color;
@define-color headerbar_backdrop_border_color @window_backdrop_fg_color;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.175);
@define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.175);
@define-color sidebar_bg_color #dae2ea;
@define-color sidebar_fg_color @window_fg_color;
@define-color sidebar_backdrop_color #e7e7e7;
@define-color sidebar_backdrop_fg_color @window_backdrop_fg_color;
@define-color sidebar_border_color @window_fg_color;
@define-color sidebar_backdrop_border_color @window_backdrop_fg_color;
@define-color sidebar_shade_color rgba(0, 0, 0, 0.175);
@define-color secondary_sidebar_bg_color #e2e9f0;
@define-color secondary_sidebar_fg_color @window_fg_color;
@define-color secondary_sidebar_backdrop_color #ececec;
@define-color secondary_sidebar_backdrop_fg_color @window_backdrop_fg_color;
@define-color secondary_sidebar_border_color @window_fg_color;
@define-color secondary_sidebar_backdrop_border_color @window_backdrop_fg_color;
@define-color secondary_sidebar_shade_color rgba(0, 0, 0, 0.175);
@define-color card_bg_color white;
@define-color card_fg_color #123354;
@define-color card_backdrop_color white;
@define-color card_backdrop_fg_color #7f7f7f;
@define-color card_shade_color #e5e5e5;
@define-color dialog_bg_color @window_bg_color;
@define-color dialog_fg_color @window_fg_color;
@define-color popover_bg_color white;
@define-color popover_fg_color #123354;
@define-color popover_shade_color rgba(0, 0, 0, 0.175);
@define-color thumbnail_bg_color white;
@define-color thumbnail_fg_color #123354;
@define-color shade_color rgba(0, 0, 0, 0.175);
@define-color scrollbar_outline_color white;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;

gtk-4.0 gtk-dark.css:

/* GTK NAMED COLORS ---------------- use responsibly! */
@define-color accent_bg_color #bde6fb;
@define-color accent_fg_color #161c1f;
@define-color accent_color #bde6fb;
@define-color destructive_bg_color #fb7c7c;
@define-color destructive_fg_color #161c1f;
@define-color destructive_color #fb7c7c;
@define-color success_bg_color #6ee1b6;
@define-color success_fg_color #161c1f;
@define-color success_color #6ee1b6;
@define-color warning_bg_color #faa483;
@define-color warning_fg_color #161c1f;
@define-color warning_color #faa483;
@define-color error_bg_color #fb7c7c;
@define-color error_fg_color #161c1f;
@define-color error_color #fb7c7c;
@define-color window_bg_color #222b30;
@define-color window_fg_color #bde6fb;
@define-color window_backdrop_color #1e2428;
@define-color window_backdrop_fg_color #71848d;
@define-color view_bg_color #161c1f;
@define-color view_fg_color #bde6fb;
@define-color view_backdrop_color #171c1f;
@define-color view_backdrop_fg_color #71848d;
@define-color headerbar_bg_color @window_bg_color;
@define-color headerbar_fg_color @window_fg_color;
@define-color headerbar_border_color @window_fg_color;
@define-color headerbar_backdrop_color @window_backdrop_color;
@define-color headerbar_backdrop_fg_color @window_backdrop_fg_color;
@define-color headerbar_backdrop_border_color @window_backdrop_fg_color;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.4);
@define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.9);
@define-color sidebar_bg_color #2d3940;
@define-color sidebar_fg_color @window_fg_color;
@define-color sidebar_backdrop_color #242b30;
@define-color sidebar_backdrop_fg_color @window_backdrop_fg_color;
@define-color sidebar_border_color @window_fg_color;
@define-color sidebar_backdrop_border_color @window_backdrop_fg_color;
@define-color sidebar_shade_color rgba(0, 0, 0, 0.4);
@define-color secondary_sidebar_bg_color #273238;
@define-color secondary_sidebar_fg_color @window_fg_color;
@define-color secondary_sidebar_backdrop_color #21282c;
@define-color secondary_sidebar_backdrop_fg_color @window_backdrop_fg_color;
@define-color secondary_sidebar_border_color @window_fg_color;
@define-color secondary_sidebar_backdrop_border_color @window_backdrop_fg_color;
@define-color secondary_sidebar_shade_color rgba(0, 0, 0, 0.4);
@define-color card_bg_color #161c1f;
@define-color card_fg_color #bde6fb;
@define-color card_backdrop_color #171c1f;
@define-color card_backdrop_fg_color #71848d;
@define-color card_shade_color #2b343a;
@define-color dialog_bg_color @window_bg_color;
@define-color dialog_fg_color @window_fg_color;
@define-color popover_bg_color #161c1f;
@define-color popover_fg_color #bde6fb;
@define-color popover_shade_color rgba(0, 0, 0, 0.4);
@define-color thumbnail_bg_color #161c1f;
@define-color thumbnail_fg_color #bde6fb;
@define-color shade_color rgba(0, 0, 0, 0.4);
@define-color scrollbar_outline_color #161c1f;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;

Forpli · August 24, 2026, 1:07pm

I had seen those files. That's why I wondered if it might be possible to set one of the colors for the scrollbar to "accent-color" (I don't know which of the three).

Ponce-De-Leon · August 24, 2026, 1:22pm

I would try first this one:

Before You have bg and fg Values what stands for Background and Foreground which making a Mixture.

Oh, and what I forgot: When You have 2 .css Files what adresses the same Values, You should disable one of them. When You want use Your own Scrollbar .css, You should check the files of the Theme You want use for these Values and comment these out to avoid Interferences.

Forpli · August 24, 2026, 2:23pm

My idea was not so good. The contrast between the accent color (test with purple dark theme) and the light grey of the hovered scrollbar is minimal. So it makes no sense, to set the accent color. I set the purple of the images on the icons of nautilus instead.

I like that the scroll bar only looks like that when you move it, but you could also set it for other states.

Ponce-De-Leon · August 24, 2026, 4:47pm

Did You used both Values? I mean the horizontal and the vertical or only one?

Forpli · August 24, 2026, 4:59pm

I had set both lines but only changed the values for scrollbar.vertical. The colors light purple and light grey were too similar.

The scrollbar.horizontal is for horizontal scrollbars, or? I haven't seen one yet. In libre office or brave browser, the scrollbars have no gradient. The layout seem to be set from the app.

Ponce-De-Leon · August 24, 2026, 7:08pm

Could be. I thought it would affect the horizontal Gradience - which would be here not much but maybe it makes the Contrast better.

Aravisian · August 25, 2026, 4:41am

Yes, though many apps lack it, due to not having a need for a horizontal bar. Only apps like Gimp or Blender where the user could need to scroll side to side as well will include GDK calls for the horizontal scrollbar class.
What this means, though, is there would not be a scrollbar. So, if you are seeing one, but it is not taking the theme, check your class and properties in the css file.

Forpli · August 25, 2026, 5:36am

The scrollbar is purple in some applications as e.g. nautilus, system monitor, gnome software, settings, but in many others not as brave-browser, libre office, gnome text editor.

I haven't disabled the lines in the original Zorin theme yet because I don't know which ones.
I tried to add the lines to the original theme, but that didn't help.

Forpli · August 25, 2026, 6:12am

You can set a horizontal or vertical gradient for each scrollbar with to bottom/top or to right/left, but I think not both in one. And because the vertical scrollbar is narrow, the gradient from bottom to top is better.

Aravisian · August 25, 2026, 10:50am

You can do both in one. Just separate with a comma.
I do not know what colors you are using, so will example in black and white.

    linear-gradient(to bottom, #fff, #000),
    linear-gradient(to right, #000, #fff);

You also can use an angle, if that serves better:

 linear-gradient(135deg, #fff, #000);

Forpli · August 25, 2026, 11:04am

How does that look? I have searched for guides to see if that is possible, but found no one which uses a combination of those. What I have looked for was a gradient from bottom to top grey to purple combined with a gradiient for the alpha values 0-1-0 (or the other way round 1-0-1 with different percentages) of the colors grey and purple from the left to the right.

Aravisian · August 25, 2026, 11:30am

I used ws3 schools as a resource when I first started trying to create themes and I recommend it (Use it for free).

I posted above the properties you can use, not the classes, since you may be applying it to different classes.
So, I do not know what you mean by:

Forpli · August 25, 2026, 11:41am

I took a look at this site yesterday and found it very helpful.

I mean a picture of how it looks. As e.g.with this tool you can see what changes/

I suspect, you get perhaps grey shades when you mix white and black.

Aravisian · August 25, 2026, 11:43am

Well, in the middle... But I figure you would replace those with hex or RGBa of your choosing.
And you can also stack more than two, by the way. I think eight is the most I have ever stacked but...

Forpli · August 25, 2026, 11:51am

Hm, I can't imagine, I'll have to try. Do you know which of the four files in ~/.config I need to edit when I just want to make a test with Zorin dark purple theme and nautilus: gtk 3.0 gtk.css, gtk 3.0 gtk-dark.css, gtk 4.0 gtk.css or gtk 4.0 gtk-dark.css?

Aravisian · August 25, 2026, 11:52am

Most apps still use GTK3, and not many are GTK4. You can just pick a known GTK3 orGTK4 app and amend that file for testing.