CSS Scrollbar Generator

Modern standard properties (2023+)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Browser support (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Reserves the scrollbar space even when not needed, preventing layout shift.

Webkit pseudo-elements (Chrome, Safari, older Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

More granular control. width sets vertical scrollbar width; height sets horizontal scrollbar height. Add both for containers that can scroll in either direction.

Cascade the two approaches

Specify the modern rules first, then webkit as an enhancement for browsers that render both:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox honours only the modern scrollbar-* rules. Chrome and Safari honour the webkit rules (which override the modern ones, so behaviour is consistent).

scrollbar-gutter prevents content shift

Without a reserved gutter, content reflows when a scrollbar appears (common on dynamic lists). Fix:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

The scrollbar slot is reserved whether or not the content scrolls. both-edges adds a matching gutter on the opposite side to keep content visually centred.

Hide scrollbars entirely

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Be careful: hiding the scrollbar prevents users from seeing that content can scroll. Use only with a clear indicator (arrows, page dots) or when the scroll behaviour is obvious from context (horizontal carousels, chat histories).

Mobile considerations

On iOS and Android, scrollbars only appear momentarily during scroll. Your custom scrollbar CSS still applies, but users may never see it for more than a second. Design accordingly, do not invest heavily in visual flair that rarely appears.

Accessibility

• Contrast: thumb against track should meet 3:1 for non-text contrast (WCAG 1.4.11).
• Width: thin scrollbars can be hard to grab with a mouse, especially for users with motor impairments. Normal width is a safer default.
• Never remove the scrollbar on scrolling regions without providing another scroll affordance. Users who rely on the scrollbar will be stuck.