Instant updates
The preview changes with every adjustment.
CSS Scrollbar Generator
Visually configure css scrollbar and copy production-ready CSS.
Configuration and CSS code remain in your browser.
CSS Scrollbar Generator
Preview
CSS preview
CSS
.element {
scrollbar-width: auto;
scrollbar-color: #10b981 #e4e4e7;
}
.element::-webkit-scrollbar { width: 10px; }
.element::-webkit-scrollbar-track { background: #e4e4e7; }
.element::-webkit-scrollbar-thumb { background: #10b981; border-radius: 10px; }How to use this css scrollbar
- 1
Adjust each property with the visual controls.
- 2
Check the result in the real-time preview.
- 3
Copy the value, full declaration or export the CSS file.
Production-ready visual CSS
Reusable code
Copy the value or complete declaration.
No dependencies
The result uses standard CSS properties.
Frequently asked questions
How does css scrollbar work?
The controls are converted into CSS properties and immediately applied to the preview.
Can I use the code in any project?
Yes. Copy the generated declaration and apply it to your project selector.
Does Tervix store my design?
No. Everything is generated locally and resets when the page reloads.