Scroll this panel to see your custom scrollbar. Adjust controls on the left — the scrollbar updates in real time.

CSS custom scrollbars use ::-webkit-scrollbar pseudo-elements for Chrome, Edge and Safari, and scrollbar-color for Firefox.

Thin scrollbars (2–6px) are a popular modern pattern — they save space while still indicating scrollable content. Thicker scrollbars are useful for touch-heavy interfaces.

The track is the groove the thumb slides in. Setting it to transparent makes the scrollbar appear to float over the content. A solid track color gives more visual weight.

The hover color applies when the user moves their cursor over the scrollbar thumb — a subtle color shift signals interactivity without being distracting.

Custom scrollbars are most impactful on dark-themed UIs, code editors, sidebars and modals with fixed heights. Mobile browsers typically ignore custom scrollbar styles.

Border radius on the thumb and track creates a pill-shaped scrollbar. Set radius to 0 for a sharp, utilitarian look. Half the width value gives a fully rounded pill.

Always test scrollbar contrast against the track background — users with low vision need sufficient difference between thumb and track colors to use it comfortably.