CSS Scrollbar Generator

Free toolNo sign-up
Surface:
scroll inside ↓
1. Open package.json in any modern Node project
2. Spot the version pinning style (caret? tilde? exact?)
3. Run npm outdated to see what could be upgraded
4. Read the changelog for each package before bumping
5. Pin major versions — they break things
6. Use peerDependencies for libraries others install
7. Tree-shake unused exports at build time
8. Avoid postinstall scripts unless absolutely necessary
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
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.
⇄

Property reference

PropertyBrowsersAccepts
scrollbar-widthFirefox + Chromium 121+ / Safari 18.2+auto, thin, none
scrollbar-colorFirefox + Chromium 121+ / Safari 18.2+
::-webkit-scrollbarChrome / Safari / Edge (all versions)width, height (the bar size)
::-webkit-scrollbar-trackChrome / Safari / Edgebackground, border-radius
::-webkit-scrollbar-thumbChrome / Safari / Edgebackground, border-radius, border
::-webkit-scrollbar-thumb:hoverChrome / Safari / Edgeall of the above
::-webkit-scrollbar-thumb:activeChrome / Safari / Edgestyles while dragging
::-webkit-scrollbar-buttonChrome / Safari / Edgerare; the up/down arrow buttons
=

Common patterns

Minimal
.scroll-area {
  /* Standard (Firefox + 2024+ Chromium) */
  scrollbar-width: thin;
  scrollbar-color: #7c6cff transparent;
}

/* Legacy WebKit (Chrome / Safari / Edge) */
.scroll-area::-webkit-scrollbar {
  width: 8px;
}

.scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #7c6cff;
  border-radius: 999px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}
Hidden
/* 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.
?

Frequently asked questions

01

Why does the generator output two different CSS blocks?

Because cross-browser scrollbar styling has been split across two syntaxes for years. The standard syntax (scrollbar-width + scrollbar-color) is a 2024-modern CSS feature that Firefox shipped first (~2018) and Chromium / Safari only adopted in 2024. It gives you two knobs: thin/auto width + thumb/track color. The legacy WebKit syntax (::-webkit-scrollbar*) gives you full control over track, thumb, hover state, padding, border-radius — but only renders in WebKit-based browsers (Chrome, Safari, Edge, older Firefox doesn't support it). The Copy combined button gives you both — modern browsers use whichever they prefer, legacy WebKit still gets pixel-precise control.

02

Why does my preview look different in Firefox than Chrome?

Firefox can't render ::-webkit-scrollbar rules — they're a non-standard Chromium / Safari extension. The live preview in this generator deliberately uses ONLY the WebKit syntax (so every knob — thumb radius, padding, hover — demonstrates its effect to Chrome / Safari users, who are the dominant audience). The exported CSS includes both syntaxes, so your real site will style correctly in Firefox via scrollbar-color. If you need perfect Firefox parity in the preview, open the deployed page in Firefox — the exported CSS does its job there.

03

Should I use scrollbar-width: thin or set width via ::-webkit-scrollbar?

Use both. scrollbar-width: thin gives Firefox a 6-8px scrollbar (the exact pixel value is browser-controlled — there's no way to set it precisely). ::-webkit-scrollbar { width: Npx } gives WebKit-based browsers pixel-precise control. The generator outputs both with the closest mapping (width <= 8 → thin in standard, otherwise auto), so the exported CSS gives the best result in each browser. If you only need Firefox + 2024+ Chromium, the standard syntax alone is enough; if you need polish in older browsers, keep the WebKit syntax too.

04

How do I hide the scrollbar entirely?

Pick the Hidden preset (or set Behavior to Hidden). The output is scrollbar-width: none + ::-webkit-scrollbar { display: none }. The element stays scrollable — scroll wheel, swipe, arrow keys, JavaScript scrollTo all still work — but the visual scrollbar disappears. Use this for: full-screen image galleries, custom-built scrollbars overlayed via JS, mobile UIs where the iOS-style bouncy scroll is enough indicator. Don't use it for general content scrolling — sighted users use the scrollbar to know how much content remains.

05

Why doesn't my scrollbar styling work on iOS Safari?

iOS Safari uses native momentum-scrolling and doesn't expose the scrollbar to CSS — the system overlay scrollbar appears during scroll and disappears afterward. ::-webkit-scrollbar works on macOS Safari but not iOS Safari for OS-managed scroll surfaces. For in-app custom scroll containers (an element with overflow: auto and a fixed height), it works on iOS Safari 14+. For the document scrollbar on iOS, there's no styling API — the OS owns it.

06

Is the WebKit prefix going away? Should I bother with the legacy syntax?

The standard scrollbar-* properties are now shipping in all evergreen browsers (Chrome 121+, Edge 121+, Safari 18+, Firefox always). For new projects targeting only those, scrollbar-color + scrollbar-width is sufficient. The legacy ::-webkit-scrollbar syntax is still useful when you need: (1) per-state hover styling (the standard syntax only takes one color pair), (2) thumb border-radius / padding control, (3) support for Chrome <121 or Safari <18 which still has significant user share (~10-15% as of mid-2026). For most production sites, ship both — total CSS overhead is ~15 lines and you get correct rendering everywhere.

07

Is this free for commercial use?

Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.

Related tools

CSS Background Pattern GeneratorCSS Border Radius GeneratorCSS Box Shadow GeneratorCSS Button GeneratorCSS Clip-Path GeneratorCSS Cursor GeneratorCSS Filter GeneratorCSS Glassmorphism GeneratorCSS Loader GeneratorCSS Outline & Border GeneratorCSS Text Shadow GeneratorCSS Wave GeneratorNeumorphism Generator

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →