📜 CSS

Custom Scrollbars in CSS — Styled, Subtle, Cross-Browser

📅 Jul 3, 2026 ⏱ 2 min read

Default scrollbars are chunky and gray; invisible ones hurt usability. Aim for subtle.

The modern standard (Firefox + new Chrome)

* {
  scrollbar-width: thin;                       /* thin | auto | none */
  scrollbar-color: #3a3a4a transparent;        /* thumb | track */
}

The webkit fallback (older Chrome/Safari)

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #3a3a4a; border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #4a4a5e; }

Ship both — browsers use whichever they understand. This site does exactly this (scroll any code block).

The layout-shift fix nobody knows

html { scrollbar-gutter: stable; }
/* reserves scrollbar space even on short pages —
   content stops jumping sideways between pages */

Never display: none the scrollbar on scrollable content — users lose their only position indicator
Dark UIs: thumb ~2 shades lighter than the background reads perfectly

← All Articles