CSSAwwwards
+ Submit tool
utilities

CSS Custom Scrollbar

Style browser scrollbars with custom colors, width, and border-radius using ::-webkit-scrollbar.

Custom scrollbars can reinforce your design system and improve visual polish. This snippet uses the ::-webkit-scrollbar pseudo-elements (Chromium and Safari) alongside the standard scrollbar-width and scrollbar-color properties (Firefox) for cross-browser coverage.

Live CSS Editor
CSS
Preview
Edit CSS → see live previewTab = 2 spaces

Usage Note

Apply the global styles to :root or body for site-wide custom scrollbars, or scope to .custom-scroll for specific containers. The ::-webkit-scrollbar family works in Chromium and Safari but not Firefox — use scrollbar-width + scrollbar-color for Firefox.

Tags
#scrollbar#webkit#custom#styling#overflow
Share on XLinkedIn