UtilityKit

40+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Scrollbar Styler

Tint scrollbar thumbs and tracks for WebKit and Firefox using copy-ready pseudo-element CSS.

About Scrollbar Styler

Scrollbar Styler bridges the gap between Chromium scrollbars and Firefox’s `scrollbar-color` shorthand by generating complementary rules from one palette. Adjust thumb and track colors plus thickness, then preview kinetic scrolling inside a sandbox list. Notes remind you where standards diverge so themed admin consoles stay consistent.

Why use Scrollbar Styler

  • Avoid memorizing vendor pseudo-elements
  • Keep Firefox and Chrome palettes aligned
  • Prototype branded scroll lanes

How to use Scrollbar Styler

  1. Pick thumb and track colors
  2. Set scrollbar width
  3. Copy WebKit rules and Firefox fallback guidance

When to use Scrollbar Styler

  • Dark-themed code viewers
  • Overflowing side panels
  • Embedded docs readers

Frequently Asked Questions

Cross-browser parity?

Firefox uses scrollbar-color; WebKit needs pseudo-elements.

Windows overlay scrollbars?

OS behavior may hide arrows regardless of CSS.

Accessibility?

Maintain contrast between thumb and track for low vision users.

Pointer hover?

Optional hover states can be appended manually.

Runs locally?

Yes.

Related tools