Custom Scrollbar CSS Generator
Both mechanisms from one set of controls — the standard properties and the WebKit pseudo-elements, in the order that makes them agree
Vertical
Line 1. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 2. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 3. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 4. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 5. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 6. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 7. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 8. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 9. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 10. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 11. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 12. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 13. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Line 14. Scroll this panel to see the thumb at its real size. A scrollbar is judged at the size it ships, not in a swatch — which is why this is a real overflowing region rather than a picture of one.
Horizontal
The WebKit block sets height as well as width, because a horizontal scrollbar takes its thickness from the height. Setting only the width is the reason a custom scrollbar so often looks right vertically and default horizontally.
A wide row of content that forces this panel to scroll sideways — row 1.
A wide row of content that forces this panel to scroll sideways — row 2.
A wide row of content that forces this panel to scroll sideways — row 3.
A wide row of content that forces this panel to scroll sideways — row 4.
A wide row of content that forces this panel to scroll sideways — row 5.
A wide row of content that forces this panel to scroll sideways — row 6.
A wide row of content that forces this panel to scroll sideways — row 7.
A wide row of content that forces this panel to scroll sideways — row 8.
Rendering in your browser, so what you see is what your engine honours — the two blocks below do not both apply everywhere.
/* The standard properties. Firefox, and every modern engine.
Note that scrollbar-width takes a keyword — there is no way to
say "10px" here, which is why the WebKit block below exists. */
.scroll-area {
scrollbar-width: thin;
scrollbar-color: #94a3b8 #f1f5f9;
}
/* WebKit / Blink — the half that can round a thumb. */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #f1f5f9;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 8px;
/* A transparent border plus background-clip is how a "floating" thumb
with padding around it is done — there is no padding on a scrollbar. */
border: 2px solid transparent;
background-clip: content-box;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.scroll-area::-webkit-scrollbar-corner {
background: #f1f5f9;
}Now use it on something
Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Width for a vertical bar, height for a horizontal one — the emitted CSS sets both. Zero hides it entirely. WebKit only; the standard property takes a keyword instead.
Rounds the draggable part. This is the single thing the standard properties cannot express, and the main reason the WebKit block is still worth emitting.
Space between the thumb and the edge of the track, faked with a transparent border and background-clip — scrollbar parts take no padding. An inset of 2–3px is what makes a thumb read as floating rather than filling.
These are literals, which means one theme. For a scrollbar that follows light and dark, replace them with the custom properties from the token generator once you have pasted the rule.
The standard property, and it only accepts these three. Keep it in step with the thickness above or the two blocks will disagree between engines.
Emits `.scroll-area` rather than `html`. Styling the document scrollbar is a decision about the whole site, including pages you have not designed yet; a class is the version you can undo.
Fades the thumb out until the pointer is over the region. Fashionable, and it costs touch users the scrollbar entirely — see the warning that appears when you turn it on.
Keep this scrollbar. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
- Token GeneratorBuild the CSS custom properties every block in the catalog is styled against — a full light and dark set in the shadcn convention. Colour maths in OKLCH, so one lightness scale works across every hue.
- Grid GeneratorPaint a page layout onto a grid and copy the CSS, with grid-template-areas checked for the rectangle rule as you go — the rule that silently voids the whole declaration when you break it. Explicit tracks or a responsive auto-fit wall.
- Flexbox PlaygroundEvery flex container and flex item property on one screen, against a live row you can add to and resize. Shows the three-part flex shorthand as the browser actually resolves it, including the basis-versus-width trap.