UtilityKit

500+ 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

Default browser scrollbars are utilitarian and rarely match an application's visual design. Branded interfaces — dashboards, editors, dark-mode apps — benefit from slim, on-tone scrollbars that feel integrated rather than bolted on. Styling scrollbars in CSS requires two different approaches: the WebKit pseudo-element API (::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb) used by Chrome, Edge, and Safari, plus the standardized scrollbar-color and scrollbar-width properties used by Firefox. The Scrollbar Styler generates both in a single output. Set scrollbar width, track and thumb colors, thumb border-radius, and a darker hover state, then copy the cross-browser CSS block.

Why use Scrollbar Styler

WebKit + Modern

Generates both ::-webkit-scrollbar pseudo-element rules for Chrome, Edge, and Safari and the W3C standard scrollbar-color and scrollbar-width properties for Firefox. One tool covers all modern browser engines without maintaining two separate code paths manually.

Width Control

Set an exact pixel width for the scrollbar or choose the thin keyword (typically 6–8px depending on the browser) for a minimal appearance. Thin scrollbars are common in modern SaaS dashboards where content density makes a standard scrollbar feel heavy.

Track + Thumb Colors

Separate color pickers for the scrollbar rail and the draggable thumb let you create high-contrast or blended combinations. Transparent track with a subtle thumb is popular in content-dense editors; matching track-to-background with a colored thumb suits branded dashboards.

Rounded Thumb

Adding border-radius to ::-webkit-scrollbar-thumb softens the indicator and gives it a pill shape that matches modern rounded UI conventions. The standard scrollbar-color property has no equivalent border-radius control, making this a WebKit-only enhancement.

Hover State

A slightly darker or lighter thumb on ::-webkit-scrollbar-thumb:hover signals interactivity and confirms the element is draggable. This micro-interaction is absent from default browser scrollbars and adds noticeable polish to custom-styled scrollable panels.

Cross-Browser CSS

The output includes both the WebKit pseudo-element block and Firefox scrollbar-color property together. Without both, your styled scrollbar appears on some browsers but not others. The generator handles the boilerplate so you do not need to maintain two rule blocks manually.

How to use Scrollbar Styler

  1. Set the scrollbar width with the slider or choose the thin keyword for a minimal appearance
  2. Pick a track color (the scrollbar rail background) with the color picker
  3. Pick a thumb color (the draggable indicator) and set its border-radius for rounded corners
  4. Add a hover color for the thumb to provide interactive feedback on cursor hover
  5. Enable the Firefox scrollbar-color and scrollbar-width fallback toggle
  6. Click Copy CSS to get the full cross-browser scrollbar CSS block

When to use Scrollbar Styler

  • When building a dark-mode dashboard where the default light scrollbar visually clashes with the dark surface
  • When creating a code editor or text panel that needs a slim, unobtrusive scrollbar that does not compete with content
  • When applying brand colors to scrollbars in a design-system component like a modal, dropdown, or sidebar
  • When a client requests that scrollbars match the application's color scheme as part of a full UI redesign
  • When a scrollable card or panel within a page needs a different scrollbar style from the rest of the document
  • When polishing a rich-text editor or data table component for a professional product release

Examples

Slim gray scrollbar

Input: Width: 8px, track: #f1f1f1, thumb: #888, thumb-radius: 4px

Output: ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } * { scrollbar-color: #888 #f1f1f1; scrollbar-width: thin; }

Indigo branded thumb with hover

Input: Width: 10px, track: transparent, thumb: #6366f1, hover: #4f46e5, radius: 8px

Output: ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

Firefox-friendly minimal

Input: scrollbar-width: thin, scrollbar-color: #888 #f1f1f1

Output: .scroll-container { scrollbar-color: #888 #f1f1f1; scrollbar-width: thin; }

Tips

  • Keep scrollbar width at 6px or wider — narrower thumbs are difficult for mouse users to grab and drag precisely
  • Always pair ::-webkit-scrollbar rules with scrollbar-color for Firefox parity in a single CSS block rather than in separate files
  • macOS hides scrollbars by default for trackpad users — test your styles with System Preferences set to Always show scrollbars so you can actually see them during development
  • Use a transparent track with a subtle semi-transparent thumb for an overlay-style scrollbar that maximizes content area width in dense panels
  • Never set scrollbar-width: none or hide scrollbars entirely on desktop layouts — users rely on them as positional indicators and drag targets even when trackpads are available

Frequently Asked Questions

Why are there two ways to style scrollbars in CSS?▾
The ::-webkit-scrollbar pseudo-element API was introduced by WebKit before any W3C standard existed, and Chrome and Safari adopted it widely. The W3C later standardized scrollbar-color and scrollbar-width for Firefox. Edge adopted both. Currently all major browsers support one or both approaches.
Does ::-webkit-scrollbar work in Firefox?▾
No. Firefox does not implement ::-webkit-scrollbar pseudo-elements. Firefox uses the W3C standard scrollbar-color and scrollbar-width properties instead. To style scrollbars across Chrome, Safari, and Firefox, you must include both approaches in your CSS.
How do I style the scrollbar in Firefox?▾
Use scrollbar-color: thumbColor trackColor and scrollbar-width: thin, auto, or none on the scrollable element. Firefox does not support border-radius on the thumb or separate hover states. The standard properties provide basic color and width control only.
Can I make a custom scrollbar on iOS Safari?▾
iOS Safari does not support any scrollbar styling — it uses the OS overlay scrollbar that appears briefly and disappears. There is no CSS API for it. Custom scrollbars on iOS require a JavaScript-based virtual scrollbar implementation, which introduces significant complexity.
Does styling scrollbars hurt accessibility?▾
Scrollbars must remain visually distinct from surrounding content and obviously draggable. Avoid making scrollbar width less than 6px, matching thumb and track to the same color, or using a thumb that has insufficient contrast with the track. Invisible scrollbars confuse users who need them for navigation.
How do I hide the scrollbar but keep scrolling?▾
Set ::-webkit-scrollbar { display: none } for WebKit and scrollbar-width: none for Firefox. Content remains scrollable via keyboard, touch, and trackpad. Use this sparingly — hidden scrollbars remove affordance and can confuse users who do not realize the content is scrollable.
Why does my scrollbar style not show on macOS?▾
macOS defaults to hiding scrollbars unless the input device is a non-trackpad mouse. Go to System Settings → Appearance → Show scroll bars → Always to force scrollbars visible for testing. Your CSS styles are applied — they simply do not display until the OS reveals them.
What is the minimum scrollbar width that stays usable?▾
6–7px is the practical minimum for a scrollbar that can be grabbed by mouse users on non-touch devices. Below 6px the thumb becomes difficult to click and drag precisely. The thin keyword across browsers renders at approximately 6–10px depending on the platform.

Explore the category

CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS. CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations. OG Tag Generator Generate Open Graph meta tags with preview-friendly fields and copy-ready output. CSS Triangle Generator Create directional CSS triangles using the transparent border technique with sizing controls. CSS Keyframes Generator Compose starter animations with timing controls and copy @keyframes blocks.
CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min

Glossary

WebKit Pseudo-Element
A vendor-prefixed CSS pseudo-element like ::-webkit-scrollbar that targets specific parts of a scrollbar in Chrome, Edge, and Safari. Not standardized by the W3C.
Scrollbar Track
The full-length rail of a scrollbar that the thumb slides along. Styled with ::-webkit-scrollbar-track in WebKit browsers; its color is the second value in scrollbar-color for Firefox.
Scrollbar Thumb
The draggable indicator within the scrollbar track that shows the viewport position and can be dragged to scroll. Styled with ::-webkit-scrollbar-thumb in WebKit; its color is the first value in scrollbar-color for Firefox.
scrollbar-color
A W3C standard CSS property that sets thumb and track colors for scrollbars in Firefox using the syntax: scrollbar-color: thumbColor trackColor.
scrollbar-width
A W3C standard CSS property that sets scrollbar width in Firefox. Values are auto (default), thin (narrow system scrollbar), or none (hidden but still functional).
Overlay Scrollbar
A scrollbar that floats over content without displacing it, typically semi-transparent and appearing only on scroll. Common on macOS and iOS. Cannot be styled with standard CSS on these platforms.