9. Lock your engines field to a Node version range
10. Set "type": "module" if you write ESM source
11. Use exports field over main for modern packages
12. files field controls what npm publish ships
13. .npmignore is the inverse — exclude from publish
14. workspaces field for monorepo without lerna
15. Skip license-checker noise in CI by allowlisting
16. Audit fix only when it doesn't break tests
17. Keep devDependencies separate — never ship in prod
18. Bun and pnpm are faster than npm — try both
19. Cache node_modules in CI; restore by lockfile hash
20. Use npm ci in CI, npm install locally
Advertisement
Modeauto
Width10px
Radiuspill
Targetbody
About this generator
Style custom CSS scrollbars visually — width, thumb color, track color, hover state, padding, border-radius. The output ships both the modern scrollbar-color / scrollbar-width syntax (Firefox + 2024+ Chromium / Safari) and the legacy ::-webkit-scrollbar* pseudo-elements (Chrome / Safari / Edge — still ~10-15% of traffic on older versions). One copy, full cross-browser coverage.
Six curated presets — Minimal, GitHub, macOS, Neon, Thin (scoped to .scroll-area), Hidden — cover the common recipes. Live scrollable preview demonstrates every control via the WebKit syntax (the only one Chrome / Safari render with pixel precision).
Permalink: every adjustment encodes into the URL. No login, no watermark, no paywall. Free and MIT-licensed.
?
Why style scrollbars?
🎨
Match your brand on every scroll
Default browser scrollbars clash with dark themes, brand palettes, and modern UI styles. A few lines of CSS replace them with something that looks intentional — without breaking native scroll behavior.
🌐
Both syntaxes, no guesswork
Firefox uses the standard `scrollbar-width` / `scrollbar-color`. Chrome / Safari / Edge use the prefixed `::-webkit-scrollbar` pseudo-elements. Most online tools generate only one. This generator outputs both, side by side, so cross-browser support is one paste.
🎯
Scope it precisely
Scope the styles to the whole page (`body`) or just one scrollable area (`.scroll-area`). Useful for sidebars, code blocks, modals, and any panel where the page-wide scrollbar would be the wrong fit.
⚡
Pixel-accurate live preview
The preview pane is a real scrollable element, restyled live as you drag the controls. What you see in the preview is exactly what your visitors will see — no rendered mockup, no approximation.
▶
How to use this generator
01
Pick a behavior
Most cases: leave on Auto. Choose Hidden if you want a scroll-able area with no visible scrollbar (still keyboard-scrollable; common for image carousels and modal lists).
02
Tune width, radius, padding
Width controls thickness (~8–12px is comfortable; under 4px is hard to grab on touch). Radius makes the thumb pill-shaped or boxy. Padding inserts a gap between thumb and track edges using a transparent border on the thumb.
03
Set the colors
Thumb is the draggable bar; track is the rail behind it; thumb-hover lights up on pointer-over. Use `transparent` to make the track invisible (modern minimalist look).
04
Choose your scope
Default `body` styles every scrollbar on the page. Use a class like `.scroll-area` to scope just one element — useful when the page background and a panel's background differ.
05
Copy both syntaxes
Click "Copy combined" to grab the standard syntax + WebKit syntax in one block. Or copy each side individually if you only need one. Drop into your stylesheet — both syntaxes coexist safely.
/* Modern */
.carousel { scrollbar-width: none; }
/* WebKit */
.carousel::-webkit-scrollbar { display: none; }
/* Still scrollable — content just lacks the visual bar. */
Dark-mode
/* Auto-adapts to dark mode using a CSS custom property. */
:root {
--scrollbar-thumb: #b0b0b0;
--scrollbar-track: #f0f0f0;
}
@media (prefers-color-scheme: dark) {
:root {
--scrollbar-thumb: #5a5a72;
--scrollbar-track: #1a1a22;
}
}
body {
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
body::-webkit-scrollbar-track { background: var(--scrollbar-track); }
✦
Pro tips
01
Don't hide system UI on long pages
A page-level `display: none` scrollbar removes a critical affordance — visitors lose the visual indicator of "there's more below." Hidden scrollbars are fine for self-contained scroll areas (carousels, story lists), risky for whole-page scroll.
02
Touch devices already auto-hide
iOS and Android show scrollbars only during scroll, then fade them. Custom desktop styles don't affect mobile. Test your CSS on a desktop browser, but trust the OS to handle mobile gracefully.
03
Width 0 is not the same as `display: none`
Setting `::-webkit-scrollbar { width: 0 }` removes the visual but keeps the layout reserve. `display: none` removes it entirely (the content reflows wider). Choose based on whether you want layout to shift between scroll-needed / scroll-not-needed states.
04
Tailwind support is partial
Tailwind v4 ships some scrollbar utilities, but the full pseudo-element control still requires custom CSS. Drop the generated CSS into your `@layer utilities` block and it'll coexist with Tailwind classes without conflict.