🎨CSS & Color

Custom Scrollbar Styling

Style scrollbars to match your site's design system.

Explanation

WebKit browsers allow you to customize the scrollbar track, thumb, and width.

Examples

Slim Scrollbar

Output

width: 8px, thumb-bg: slate-300

Code Examples

WebKit CSS

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

Try it Now

Open in Scrollbar Styler

💡 Tips

Keep scrollbars wide enough to be usable on touch screens if needed
Use a subtle color contrast from the background
Firefox uses a different standard (scrollbar-width)

⚠️ Common Pitfalls

Scrollbars that are too thin or low-contrast are hard to find