CSS Scrollbar Styler
Design custom scrollbar CSS by adjusting color, width, and radius
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you replace the browser's plain default scrollbar with a custom design that fits your site. Adjust thumb and track colors, width, and corner radius with sliders and color pickers, watch the live preview update instantly, and copy ready-to-use CSS — all processed locally in your browser with nothing sent to a server.
How to use
- Pick a thumb (handle) color and a track (background) color using the color pickers or HEX fields.
- Drag the width and radius sliders to shape the scrollbar the way you want.
- Scroll inside the preview box to see how the styled scrollbar behaves in real time.
- Click 'Copy CSS' to grab the generated code and paste it into your project's stylesheet.
FAQ
- Does the generated CSS work in every browser?
- Yes. It combines the ::-webkit-scrollbar pseudo-elements used by WebKit browsers (Chrome, Safari, Edge) with the standard scrollbar-color and scrollbar-width properties supported by Firefox.
- Where should I apply the generated CSS?
- Rename the .custom-scrollbar class in the code to match the element you want to style — the styles will then apply only to that element's scrollable area.
- Is any of my data sent to a server?
- No. All color selection and CSS generation happen instantly in your browser; nothing is uploaded anywhere.