CSSScrollbarsUI DesignCross-Browser

Custom Scrollbars with CSS: WebKit & Firefox Techniques

Default browser scrollbars break dark UIs. Learn how to style scrollbars for Chrome/Safari and Firefox, create thin overlay scrollbars, and handle cross-browser inconsistencies.

U

UIXplor Team

February 25, 2026 · 5 min read

✦

01The Two CSS Scrollbar Systems

Two separate CSS APIs exist for scrollbar styling:

1. WebKit API — Chrome, Safari, Edge: `::-webkit-scrollbar` pseudo-elements 2. Standard API — Firefox: `scrollbar-width` and `scrollbar-color`

Both must be implemented for cross-browser support.

02Styling WebKit Scrollbars

css
/* The scrollbar track */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* The draggable handle */
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

03Firefox Scrollbars

Firefox uses a simpler two-property API:

css
* {
  scrollbar-width: thin; /* none | thin | auto */
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  /* Format: thumb-color track-color */
}

No pseudo-elements. The API is intentionally minimal — Firefox prioritizes user control over scrollbar appearance.

04Complete Cross-Browser Recipe

css
.scroll-container {
  /* WebKit */
  --sb-thumb: rgba(255,255,255,0.12);
  --sb-track: transparent;
}
.scroll-container::-webkit-scrollbar { width: 5px; }
.scroll-container::-webkit-scrollbar-track { background: var(--sb-track); }
.scroll-container::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 3px; }
.scroll-container { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }

Related UI Components

◈

Collections

All UI component collections

Back to Blog