CSS Scrollbar Styler
Adjust color, width, and roundness to generate custom scrollbar CSS
Turn the browser's plain default scrollbar into something that matches your site's design. Set the thumb and track colors, width, and corner radius with sliders and a color picker, and see the result immediately in a scrollable preview. Everything is calculated in your browser, so you get your CSS instantly with nothing sent to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Set the thumb color and the track (background) color using the color picker or the HEX input.
- Move the width and roundness sliders to shape the scrollbar the way you want.
- Scroll the preview box on the page to see how it actually behaves.
- Copy the finished CSS with the "Copy CSS" button and paste it into your project's stylesheet.
FAQ
- Does the generated CSS work in every browser?
- Yes. It outputs both the ::-webkit-scrollbar pseudo-element syntax for WebKit browsers (Chrome, Safari, Edge) and the standard scrollbar-color and scrollbar-width properties for Firefox, so it applies across both rendering engines.
- Where should I apply the generated CSS?
- Rename the .custom-scrollbar class at the top of the code to your element's class, then assign it to that element — the styling applies only to the scrollable area inside it.
- Is any of my input sent to a server?
- No. Color selection and CSS generation all happen instantly in your browser, and no data is transmitted anywhere.