CSSForge

Professional CSS Tools

Scrollbar Styler

Design custom scrollbars for webkit browsers and Firefox with live preview.

Presets
Click to apply
Scrollbar Settings

Use * for all elements, or specify a class/element

Live Preview

Vertical

Scroll item 1
Scroll item 2
Scroll item 3
Scroll item 4
Scroll item 5
Scroll item 6
Scroll item 7
Scroll item 8
Scroll item 9
Scroll item 10
Scroll item 11
Scroll item 12
Scroll item 13
Scroll item 14
Scroll item 15
Scroll item 16
Scroll item 17
Scroll item 18
Scroll item 19
Scroll item 20

Horizontal

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12

Scrollbar anatomy:

8px

• Track: #f1f5f9

• Thumb: #3b82f6

• Hover: #2563eb

• Radius: 8px

Generated CSS
/* Webkit Scrollbar Styles (Chrome, Safari, Edge) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px; /* for horizontal scrollbars */
}

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

*::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 8px;
  
}

*::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

/* Firefox (limited support) */
* {
  scrollbar-width: auto;
  scrollbar-color: #3b82f6 #f1f5f9;
}

/* Hide scrollbar but keep scrolling (accessibility note: use with caution) */
/*
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
*/

/* Note: Scrollbar styling is not standardized across all browsers.
   Webkit-based browsers (Chrome, Safari, Edge) have full support.
   Firefox supports scrollbar-color and scrollbar-width only.
   The ::-webkit-scrollbar pseudoelements are not part of the CSS spec. */