CSS Scrollbars & Custom UI Chrome

WebKit Scrollbar Styling

Chrome, Safari, Edge, and other WebKit/Blink browsers support a set of pseudo-elements that give you full control over scrollbar appearance. This approach has been available for over a decade and remains the most flexible option for scrollbar customization.

These pseudo-elements let you style the track (the gutter), the thumb (the draggable part), the corner (where horizontal and vertical scrollbars meet), and even the buttons (arrows at each end, though most modern designs hide these).

scrollbar-color & scrollbar-width

The CSS standard approach uses two properties: scrollbar-color and scrollbar-width. These are supported in Firefox and are gaining broader adoption.

The scrollbar-color property takes two values: the thumb color and the track color. scrollbar-width accepts three keywords: auto (default), thin (narrower), or none (hidden but still scrollable).

The standard properties are simpler but offer less control than the WebKit pseudo-elements — you can't separately style hover states, corners, or add border-radius to the thumb.

Cross-Browser Strategy

The recommended approach is to use both: standard properties as the baseline, with WebKit pseudo-elements for enhanced styling in supporting browsers.

Dark Mode Scrollbars

On dark-themed sites, default scrollbars create a jarring light rectangle. The simplest fix is to declare color-scheme: dark on the root element — this tells the browser to use its native dark scrollbar variant without any custom styling:

For more control, use the custom scrollbar CSS shown above with semi-transparent white values. This blends naturally with any dark background color.

Overlay & Auto-Hide Scrollbars

macOS and some mobile browsers use overlay scrollbars that appear only when scrolling and float over the content. You can approximate this behavior with overflow: overlay (where supported) or by using scrollbar-width: thin with a transparent track.

To completely hide scrollbars while keeping scroll functionality, combine scrollbar-width: none with the WebKit approach:

Only hide scrollbars when there's another clear indication that content is scrollable (like a visible gradient fade or swipe affordance). Hidden scrollbars can create usability issues, especially for mouse users who rely on scrollbar visibility.

Custom CSS Cursors

The CSS cursor property changes the mouse pointer appearance. CSS provides dozens of built-in cursor values for different interaction types, and you can also use custom images.

Built-in Cursor Values

The most commonly used cursor values are: pointer (clickable elements), text (text selection), grab and grabbing (draggable elements), not-allowed (disabled actions), crosshair (precision selection), and wait or progress (loading states).

Browse all available cursor values interactively in the CSS Cursor Gallery.

Custom Cursor Images

You can use any image (PNG, SVG, or CUR) as a cursor. Provide a fallback keyword in case the image fails to load:

Keep custom cursor images small (32×32px or smaller) for best performance and compatibility. Always provide the hotspot coordinates so clicks register at the expected point. And always include a fallback keyword — without it, the cursor may disappear entirely if the image fails.

Performance Considerations

Custom scrollbar styles are painted by the browser's compositor and have negligible performance impact. Custom cursor images are cached after the first load. Neither technique should cause any measurable performance issues in production.

The main risk is usability, not performance. Extremely thin or transparent scrollbars can make content harder to navigate for users who rely on scrollbar interaction. Custom cursors that don't match the expected interaction type (like using a pointer cursor on non-clickable text) create confusion. Keep accessibility in mind when customizing UI chrome.