CSS Scrollbar Styling

Create beautiful, branded, and accessible scrollbars with modern CSS!

What is Scrollbar Styling?

CSS Scrollbar Styling lets you customize the look and feel of scrollbars in your web applications. You can change their color, width, border radius, and more, making them match your site's design and improving user experience.

Syntax

/* WebKit Browsers (Chrome, Edge, Safari) */
.selector::-webkit-scrollbar {
  width: 1rem;
}
.selector::-webkit-scrollbar-thumb {
  background: #4f8cff;
  border-radius: 0.5rem;
}

/* Firefox & Modern Browsers */
.selector {
  scrollbar-color: #4f8cff #f0f4fa;
  scrollbar-width: thin;
}
💡 Tip: Always test your custom scrollbars for accessibility and cross-browser compatibility!
Browser Support: ::-webkit-scrollbar works in Chrome, Edge, Safari. scrollbar-color and scrollbar-width are supported in Firefox and Chromium-based browsers.

Interactive Examples

Custom Scrollbar Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque.

Scroll to see the custom scrollbar in action! You can style the track, thumb, and even add hover effects.

Vivamus dictum, urna at cursus dictum, enim erat dictum erat, at dictum urna erat at enim.

Sed euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque.

More content... More content... More content... More content... More content...

.custom-scrollbar {
  scrollbar-color: #4f8cff #f0f4fa;
  scrollbar-width: thin;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 1rem;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4f8cff;
  border-radius: 0.5rem;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f0f4fa;
  border-radius: 0.5rem;
}

Thin Minimal Scrollbar

This box uses a very thin, minimal scrollbar for a subtle look.

Perfect for sidebars or overlays where you want less visual distraction.

Scroll to see the effect!

.thin-scrollbar {
  scrollbar-color: #2a4d8f #e3e9f7;
  scrollbar-width: thin;
}
.thin-scrollbar::-webkit-scrollbar {
  width: 0.4rem;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
  background: #2a4d8f;
  border-radius: 0.3rem;
}
.thin-scrollbar::-webkit-scrollbar-track {
  background: #e3e9f7;
}
Try it: Scroll inside the boxes above to see the custom scrollbars in action. Resize your window to test responsiveness!

References