CSS Scrollbar Generator

Free tool No sign-up

Controls

Behavior

Width 10px

Thumb radius pill

Padding 2px

Gap between the thumb and track edges (transparent border).

Thumb

Thumb hover

Track

Target selector

Scope the styles. body = whole page; a class = just one element.

Presets:

Live previewscroll inside →

Open package.json in any modern Node project
Spot the version pinning style (caret? tilde? exact?)
Run npm outdated to see what could be upgraded
Read the changelog for each package before bumping
Pin major versions — they break things
Use peerDependencies for libraries others install
Tree-shake unused exports at build time
Avoid postinstall scripts unless absolutely necessary
Lock your engines field to a Node version range
Set "type": "module" if you write ESM source
Use exports field over main for modern packages
files field controls what npm publish ships
.npmignore is the inverse — exclude from publish
workspaces field for monorepo without lerna
Skip license-checker noise in CI by allowlisting
Audit fix only when it doesn’t break tests
Keep devDependencies separate — never ship in prod
Bun and pnpm are faster than npm — try both
Cache node_modules in CI; restore by lockfile hash
Use npm ci in CI, npm install locally

The preview applies your settings via WebKit syntax — the most expressive of the two recipes — so every control (width, radius, padding, hover) demonstrates visibly in Chrome / Safari / Edge. Firefox can\'t render WebKit styles, so the live preview won\'t reflect your settings there, but the generated CSS below includes the standard syntax for full Firefox support when you copy it into your own project.

Generated CSS

Standard (Firefox + 2024+)

body {
  scrollbar-width: auto;
  scrollbar-color: #7c6cff rgba(255,255,255,0.04);
}

WebKit (Chrome / Safari / Edge)

body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
}

body::-webkit-scrollbar-thumb {
  background: #7c6cff;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.04);
  background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

About this generator

Generate custom CSS scrollbars visually — width, thumb color, track color, hover state, padding, border-radius. Outputs both modern scrollbar-color and legacy ::-webkit-scrollbar CSS side by side, with a live scrollable preview.

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

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).

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.

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).

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.

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

Property	Browsers	Accepts
`scrollbar-width`	`Firefox + Chromium 121+ / Safari 18.2+`	`auto, thin, none`
`scrollbar-color`	`Firefox + Chromium 121+ / Safari 18.2+`
`::-webkit-scrollbar`	`Chrome / Safari / Edge (all versions)`	`width, height (the bar size)`
`::-webkit-scrollbar-track`	`Chrome / Safari / Edge`	`background, border-radius`
`::-webkit-scrollbar-thumb`	`Chrome / Safari / Edge`	`background, border-radius, border`
`::-webkit-scrollbar-thumb:hover`	`Chrome / Safari / Edge`	`all of the above`
`::-webkit-scrollbar-thumb:active`	`Chrome / Safari / Edge`	`styles while dragging`
`::-webkit-scrollbar-button`	`Chrome / Safari / Edge`	`rare; 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

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.

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.

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.

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.