Skip to main content

Scrollbar Styler

v1.0.2

Design custom scrollbars with live preview — outputs both Webkit and Firefox CSS rules.

Designs custom scrollbars using both the Webkit ::-webkit-scrollbar API and the CSS scrollbar-width/scrollbar-color Firefox API, with live preview and copy-ready dual-format CSS.

How to use
  • →Set track colour, thumb colour, width, and border-radius using the controls.
  • →Preview scrolls in the live panel on the right.
  • →Copy both the Webkit block and the Firefox scrollbar properties.
#1e293b
#6366f1
#818cf8

Preview

Scrollable content line 1 — adjust the controls to see changes in real time

Scrollable content line 2 — adjust the controls to see changes in real time

Scrollable content line 3 — adjust the controls to see changes in real time

Scrollable content line 4 — adjust the controls to see changes in real time

Scrollable content line 5 — adjust the controls to see changes in real time

Scrollable content line 6 — adjust the controls to see changes in real time

Scrollable content line 7 — adjust the controls to see changes in real time

Scrollable content line 8 — adjust the controls to see changes in real time

Scrollable content line 9 — adjust the controls to see changes in real time

Scrollable content line 10 — adjust the controls to see changes in real time

Scrollable content line 11 — adjust the controls to see changes in real time

Scrollable content line 12 — adjust the controls to see changes in real time

Scrollable content line 13 — adjust the controls to see changes in real time

Scrollable content line 14 — adjust the controls to see changes in real time

Scrollable content line 15 — adjust the controls to see changes in real time

Scrollable content line 16 — adjust the controls to see changes in real time

Scrollable content line 17 — adjust the controls to see changes in real time

Scrollable content line 18 — adjust the controls to see changes in real time

Scrollable content line 19 — adjust the controls to see changes in real time

Scrollable content line 20 — adjust the controls to see changes in real time

CSS Output

/* Webkit (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: #1e293b;
}
*::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #818cf8;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #6366f1 #1e293b;
}