CSS Scrollbar Style Generator
Generate cross-browser custom scrollbar CSS — WebKit ::-webkit-scrollbar-* rules plus Firefox's scrollbar-color/scrollbar-width — from width, track, thumb and corner settings, with a real scrollable live preview.
Input
Width
Colors
Only visible where a vertical and horizontal scrollbar meet.
Shape & markup
Insets the thumb from the track with a ring of track color, so it looks like it's floating.
Apply this class to any element with overflow — every selector is scoped under it.
Output
Your scrollbar will appear here.
The real generated CSS, isolated in a Shadow DOM — scroll the box to see it.
A scrollable box with the class applied — replace the height/content with your own.
More ways to use this tool
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scrollbar-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"widthPreset": "thin",
"customWidth": "12",
"trackColor": "#f1f5f9",
"thumbColor": "#94a3b8",
"thumbHoverColor": "#64748b",
"cornerColor": "#f1f5f9",
"trackRadius": "8",
"thumbRadius": "8",
"floatingThumb": "true",
"className": "io-scrollbar"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-scrollbar-style-generator` tool (CSS Scrollbar Style Generator) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.
Embed widget
<iframe
src="https://iotools.cloud/embed/css-scrollbar-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Scrollbar Style Generator — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Drop this into your own page — free, no key required, just a link back.
| Cost per API/MCP call | From 5 credits |
|---|---|
| Need more credits? | View pricing |
Also available with
Guides
What this tool does
Browsers don't agree on how to style a scrollbar. Chrome, Safari and Edge use a set of ::-webkit-scrollbar-* pseudo-elements; Firefox ignores all of those and instead reads two shorthand properties, scrollbar-width and scrollbar-color. This tool builds both at once from a handful of controls — width, track color, thumb color, hover color, corner color and corner radius — and shows you a real, scrollable preview so you can see the result before copying anything.
How to use it
- Pick a Scrollbar Width — Thin, Auto (the browser's own default width, recolored), a Custom pixel value, or Hidden.
- Set the Track, Thumb, Thumb Hover and Corner colors.
- Adjust the Track Radius and Thumb Radius, and toggle Floating thumb for a thumb inset from the track by a ring of track color.
- Give it a Class Name, then scroll the live preview to check it.
- Copy the CSS into your stylesheet and apply the class name to any element with
overflow: autooroverflow: scroll.
Why does the CSS need both a WebKit block and a Firefox block?
There's no single standard scrollbar-styling API yet. WebKit-based browsers expose the scrollbar as five stylable pseudo-elements (::-webkit-scrollbar, -track, -thumb, -thumb:hover, -corner); Firefox implements the newer, much simpler scrollbar-width/scrollbar-color properties and doesn't support the WebKit pseudo-elements at all. Shipping only one half leaves a whole browser engine with the unstyled default scrollbar, so the generated CSS always includes both.
Why can't Firefox use my custom pixel width?
scrollbar-width only accepts three keywords — auto, thin, none — there's no property for an exact pixel value. When you pick Custom width, Firefox falls back to thin, which is the closest available option.
Will this affect scrollbars anywhere else on my page?
No. Every rule is scoped under the class name you choose, so only elements you apply that class to are affected — the rest of the page keeps its native scrollbar.
What if I want to hide the scrollbar completely?
Choose the Hidden width preset. It sets scrollbar-width: none for Firefox and display: none on the WebKit scrollbar pseudo-element, so the element still scrolls (with the mouse wheel, touch, or a script) but shows no scrollbar track or thumb at all.
What if I need a different scroll effect entirely?
For scroll-triggered animations rather than scrollbar appearance, see the CSS Scroll-Driven Animation Generator. To round the corners of the scrollable box itself rather than its scrollbar, use the CSS Border Radius Generator.