CSS Scrollbar Generator
Create custom scrollbar styles with live preview. Generate production-ready CSS for Chrome, Safari, and Edge browsers.
Quick Presets
Browser Compatibility
This CSS works in Chrome, Safari, and Edge (Webkit browsers). Firefox uses a different syntax. The generated styles will not affect Firefox scrollbars.
Customize Scrollbar
Live Preview
Scroll down to see your custom scrollbar in action!
Custom scrollbars allow you to match the look and feel of your website's design. They provide a more cohesive user experience and can help reinforce your brand identity.
This preview shows exactly how your scrollbar will appear in Webkit browsers. Try hovering over the scrollbar thumb to see the hover effect you've configured.
You can customize the width, colors, border radius, shadows, and more. Use the Basic tab for quick adjustments or switch to Advanced for fine-tuned control.
Keep scrolling to see more content! The scrollbar styling will apply to any element with overflow, whether it's the entire page or a specific container.
Remember that custom scrollbars should still be accessible and easy to use. Maintain good contrast between the track and thumb, and ensure the scrollbar is visible enough for users to notice.
Additional Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Generated CSS
/* Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}When to Use This Tool
Match scrollbar colors to your brand palette for a cohesive look across your entire website.
Recommended: Marketing Sites
Create scrollbars that blend seamlessly with dark themes and reduce visual distraction.
Recommended: Dark Mode Design
Style scrollable content areas, code editors, chat windows, and data tables.
Recommended: Web Applications
Maintain consistent scrollbar styling across components in your design system.
Recommended: Component Libraries
Create subtle, thin scrollbars that don't compete with your content.
Recommended: Clean Interfaces
Improve user experience with visible, easy-to-grab scrollbars that provide clear feedback.
Recommended: User Experience
How It Works
Choose a preset style (Minimal, Modern, Gradient, Dark, Colorful, or Rounded)
Use the Basic tab to adjust width and colors quickly
Switch to Advanced tab for border radius, borders, and shadows
Preview your scrollbar in real-time with scrollable content
Test the hover effect by moving your mouse over the scrollbar
Copy the CSS code to clipboard or download as a .css file
Paste the CSS into your stylesheet to apply globally or to specific elements
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
Which browsers support custom scrollbar styles?
Custom scrollbar styles using ::-webkit-scrollbar work in Chrome, Safari, Edge, and other Webkit-based browsers. Firefox uses a different syntax (scrollbar-color and scrollbar-width properties) which is not included in the generated code.
How do I apply the scrollbar to my entire page?
To style the entire page scrollbar, paste the generated CSS into your global stylesheet. The ::-webkit-scrollbar selectors will automatically apply to the page. For specific elements, add a class selector like ".my-container::-webkit-scrollbar".
Can I use gradients for the scrollbar thumb?
Yes! Instead of a solid color, you can use a CSS gradient in the thumb color field. For example: linear-gradient(180deg, #667eea 0%, #764ba2 100%). This works great for modern, eye-catching designs.
What's the difference between track and thumb?
The track is the background area where the scrollbar moves, like a rail. The thumb is the draggable part that moves up and down (or left and right) to scroll the content. Think of it like a train track (track) and train (thumb).
How do I make the scrollbar invisible until hover?
Set the track color to transparent, and the thumb color to transparent in the base state. Then use CSS like ".container:hover::-webkit-scrollbar-thumb { background: #888; }" to show it on hover.
What's a good width for custom scrollbars?
For most designs, 8-12px works well. Thinner scrollbars (4-8px) are great for minimalist designs but may be harder to grab. Wider scrollbars (12-16px) are easier to use but take up more space. Consider your users' needs and device types.
Should I style scrollbars on mobile devices?
Mobile browsers typically hide scrollbars or use native styling that can't be customized. These Webkit styles primarily affect desktop browsers. Focus on making your content naturally scrollable on mobile.
How do I ensure my scrollbars are accessible?
Maintain good contrast between track and thumb (at least 3:1 ratio). Make the thumb large enough to grab easily (at least 8px wide). Ensure hover states are visible. Don't make scrollbars too subtle or they may be hard to find.