CSS Scrollbar Styler

Customize scrollbar • Width, colors, radius • Chrome, Safari, Firefox

Scrollbar PreviewScroll to see the custom scrollbar
Item 1This is sample content line 1 for scrollbar preview.
Item 2This is sample content line 2 for scrollbar preview.
Item 3This is sample content line 3 for scrollbar preview.
Item 4This is sample content line 4 for scrollbar preview.
Item 5This is sample content line 5 for scrollbar preview.
Item 6This is sample content line 6 for scrollbar preview.
Item 7This is sample content line 7 for scrollbar preview.
Item 8This is sample content line 8 for scrollbar preview.
Item 9This is sample content line 9 for scrollbar preview.
Item 10This is sample content line 10 for scrollbar preview.
Item 11This is sample content line 11 for scrollbar preview.
Item 12This is sample content line 12 for scrollbar preview.
Item 13This is sample content line 13 for scrollbar preview.
Item 14This is sample content line 14 for scrollbar preview.
Item 15This is sample content line 15 for scrollbar preview.
Item 16This is sample content line 16 for scrollbar preview.
Item 17This is sample content line 17 for scrollbar preview.
Item 18This is sample content line 18 for scrollbar preview.
Item 19This is sample content line 19 for scrollbar preview.
Item 20This is sample content line 20 for scrollbar preview.
Item 21This is sample content line 21 for scrollbar preview.
Item 22This is sample content line 22 for scrollbar preview.
Item 23This is sample content line 23 for scrollbar preview.
Item 24This is sample content line 24 for scrollbar preview.
Item 25This is sample content line 25 for scrollbar preview.
Item 26This is sample content line 26 for scrollbar preview.
Item 27This is sample content line 27 for scrollbar preview.
Item 28This is sample content line 28 for scrollbar preview.
Item 29This is sample content line 29 for scrollbar preview.
Item 30This is sample content line 30 for scrollbar preview.
CSS Code
/* Custom Scrollbar - Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #4f46e5;
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #6366f1 #f1f5f9;
}
#6366f1
#4f46e5
#f1f5f9

Scrollbar Presets

Frequently Asked Questions

Common questions about CSS Scrollbar

01

What is CSS Scrollbar Styler?

02

Which browsers support custom scrollbars?

03

What is the standard scrollbar width?

04

Can I style horizontal scrollbars?

05

Why is my scrollbar not styling?

06

Can I add scrollbar to specific elements only?