HomeToolsScrollbar

CSS WORKSPACE

Scrollbar

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Scrollbar

Presets
Dimensions
12px
6px
Colors
PREVIEW

Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Good design is obvious. Great design is transparent."

Section 1: Filler content to ensure there is enough vertical height to trigger the scrollbar visibility. The width, color, and radius of the scrollbar on the right (or bottom) should reflect the settings chosen in the control panel.

Section 2: Filler content to ensure there is enough vertical height to trigger the scrollbar visibility. The width, color, and radius of the scrollbar on the right (or bottom) should reflect the settings chosen in the control panel.

Section 3: Filler content to ensure there is enough vertical height to trigger the scrollbar visibility. The width, color, and radius of the scrollbar on the right (or bottom) should reflect the settings chosen in the control panel.

Section 4: Filler content to ensure there is enough vertical height to trigger the scrollbar visibility. The width, color, and radius of the scrollbar on the right (or bottom) should reflect the settings chosen in the control panel.

Section 5: Filler content to ensure there is enough vertical height to trigger the scrollbar visibility. The width, color, and radius of the scrollbar on the right (or bottom) should reflect the settings chosen in the control panel.

Note: Webkit scrollbars work in Chrome, Safari, Edge. Firefox uses standard `scrollbar-width` and `scrollbar-color`.

css
/* Webkit Scrollbar Customization */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a5afbb;
}
A PRACTICAL GUIDE

Style a scrollbar without hiding how to scroll

A scrollbar helps visitors understand that a region contains more content. Styling it can make a code panel fit the interface, but a very thin or low-contrast thumb makes the control harder to see and use. Browser and operating-system settings may override its appearance.

How to use this tool

  1. Choose a thumb and track color with a visible difference. Apply the style to a specific scrollable panel rather than every element.
  2. Set a practical width and corner radius. Test dragging as well as wheel, touch, and keyboard scrolling.
  3. Copy the generated CSS and check your supported browsers. Include standard properties where appropriate instead of relying only on WebKit-specific selectors.

These standard properties set the thumb and track colors for a panel while keeping normal width. The panel still needs enough content to overflow before a scrollbar appears. Overlay scrollbars may remain hidden until the visitor interacts.

Read the reference documentation ↗
Example to try in your project
.code-panel {
  overflow: auto;
  scrollbar-width: auto;
  scrollbar-color: #64748b #f1f5f9;
}

Before you ship

Do not hide a scrollbar merely to make a layout look cleaner. Provide a visible indication of overflow and ensure the scroll region can be reached and operated with the keyboard.

Explore a related tool