Free Online CSS Scrollbar Customizer Tool

Customize CSS scrollbars online instantly with this free CSS Scrollbar Customizer. Use the tool below to create custom scrollbar colors, width, thumb styles, track styles and clean CSS code for your website or web app.

CSS scrollbar settings

Customize scrollbar width, thumb, track, hover state, radius, borders and browser-specific output.

Scrollbar controls

Adjust vertical width, horizontal height, border radius and thumb border spacing.

Scrollbar width 12px
Horizontal height 12px
Thumb radius 999px
Thumb border 3px

Live preview

Scroll inside the preview to test vertical and horizontal scrollbar styling.

Generated CSS

Scrollbar summary 12px scrollbar · thin Firefox · rounded thumb

Saved scrollbars

Recent and favorite scrollbar styles are saved locally in this browser.

Recent scrollbars

Favorite scrollbars

What is a CSS Scrollbar Customizer?

A CSS Scrollbar Customizer is an online tool that helps you create custom scrollbar styles visually. Instead of writing scrollbar CSS manually, you can adjust the scrollbar width, thumb color, track color, border radius and hover styles, preview the result and copy the generated CSS code.

Custom scrollbars are commonly used in websites, dashboards, sidebars, modals, code blocks, chat panels, app interfaces, dropdowns and scrollable content areas. A well-designed scrollbar can make a website feel more polished and consistent with the rest of the UI.

This CSS Scrollbar Customizer runs directly in your browser, making it fast and simple to create custom scrollbar CSS without installing software.

What can you use it for?

You can use this online scrollbar customizer to create custom scrollbars for full pages, scrollable containers, sidebars, panels, cards, modals, dropdown menus, text areas, dashboards, documentation sections and web app layouts.

For example, you may want a thin scrollbar for a clean interface, a dark scrollbar for a dashboard, a colorful scrollbar for a branded website, a rounded scrollbar thumb, or a subtle scrollbar that blends into the page background.

How to use the CSS Scrollbar Customizer

Step 1: Customize the scrollbar style

Use the controls to adjust the scrollbar width, thumb color, track color, border radius and hover effect.

Step 2: Preview the scrollbar

Check the live preview to see how the custom scrollbar looks. Adjust the values until the style matches your design.

Step 3: Copy the CSS code

Copy the generated scrollbar CSS and paste it into your stylesheet, component, page builder, theme or frontend project.

CSS scrollbar options

This CSS Scrollbar Customizer can help with common scrollbar styling tasks such as:

  • Customize CSS scrollbars
  • Create custom scrollbar colors
  • Create thin scrollbars
  • Create rounded scrollbar thumbs
  • Create custom scrollbar tracks
  • Adjust scrollbar width
  • Adjust scrollbar thumb color
  • Adjust scrollbar track color
  • Adjust scrollbar border radius
  • Create scrollbar hover effects
  • Generate WebKit scrollbar CSS
  • Generate Firefox scrollbar CSS
  • Create dark mode scrollbars
  • Create subtle UI scrollbars
  • Preview scrollbar styles live
  • Generate clean CSS code
  • Copy scrollbar CSS instantly
  • Use the tool without installing software

The final CSS output may depend on the browser, selected values, scrollable container and how the generated code is applied in your project.

What is a custom CSS scrollbar?

A custom CSS scrollbar is a scrollbar styled with CSS instead of using only the browser’s default appearance. You can customize parts of the scrollbar such as the track, thumb, width, colors and radius.

The scrollbar track is the background area of the scrollbar. The scrollbar thumb is the draggable part that moves when the user scrolls.

Custom scrollbars can help your interface feel more consistent, especially in dashboards, side panels, dark mode layouts and branded website designs.

Basic custom scrollbar example

A basic custom scrollbar can be created with WebKit scrollbar pseudo-elements.

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 999px;
}

This creates a custom scrollbar with a light track and rounded thumb.

Custom scrollbar with hover effect

You can change the scrollbar thumb color on hover.

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

Hover states can make the scrollbar feel more interactive and polished.

Firefox scrollbar CSS

Firefox supports scrollbar styling with scrollbar-width and scrollbar-color.

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #64748b #f1f5f9;
}

The first color controls the scrollbar thumb, and the second color controls the scrollbar track.

Full custom scrollbar CSS example

A more complete scrollbar style can include both WebKit and Firefox rules.

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #64748b #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

This approach gives you broader browser coverage while keeping the scrollbar style consistent.

Main CSS scrollbar properties

scrollbar-width

The scrollbar-width property controls the scrollbar thickness in Firefox.

scrollbar-width: thin;

Common values include auto, thin and none.

scrollbar-color

The scrollbar-color property controls the thumb and track colors in Firefox.

scrollbar-color: #64748b #f1f5f9;

The first color is the thumb color, and the second color is the track color.

::-webkit-scrollbar

The ::-webkit-scrollbar pseudo-element controls the scrollbar size in WebKit-based browsers.

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

::-webkit-scrollbar-track

The ::-webkit-scrollbar-track pseudo-element controls the scrollbar track.

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

::-webkit-scrollbar-thumb

The ::-webkit-scrollbar-thumb pseudo-element controls the draggable scrollbar thumb.

::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 999px;
}

Custom page scrollbar

You can apply a custom scrollbar to the full page by targeting the root or body scrollbars.

html {
  scrollbar-width: thin;
  scrollbar-color: #64748b #f8fafc;
}

html::-webkit-scrollbar {
  width: 10px;
}

html::-webkit-scrollbar-track {
  background: #f8fafc;
}

html::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 999px;
}

This can help the entire website scrollbar match your design system.

Custom container scrollbar

You can also style scrollbars only inside a specific container.

.scroll-panel {
  max-height: 360px;
  overflow-y: auto;
}

.scroll-panel::-webkit-scrollbar {
  width: 8px;
}

.scroll-panel::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
}

This is useful for sidebars, modals, chat panels, code blocks, dropdowns and dashboard widgets.

Dark mode scrollbar example

Dark interfaces often need darker scrollbar tracks and lighter thumbs.

.dark-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #64748b #0f172a;
}

.dark-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.dark-scrollbar::-webkit-scrollbar-track {
  background: #0f172a;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 999px;
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

This keeps the scrollbar visible without making it too bright or distracting.

Thin scrollbar example

A thin scrollbar can create a cleaner interface.

.thin-scrollbar {
  scrollbar-width: thin;
}

.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

Thin scrollbars are useful for dashboards, side panels, code blocks and compact UI components.

Rounded scrollbar example

Rounded scrollbar thumbs often look softer and more modern.

.rounded-scrollbar::-webkit-scrollbar-thumb {
  background: #6366f1;
  border-radius: 999px;
}

This can match rounded buttons, cards and other modern UI elements.

CSS scrollbars and browser support

Scrollbar styling is handled differently across browsers. WebKit-based browsers commonly use pseudo-elements such as ::-webkit-scrollbar, while Firefox supports properties such as scrollbar-width and scrollbar-color.

Because browser support can vary, many projects include both approaches when creating custom scrollbars. The generated CSS may include WebKit rules for Chrome, Edge and Safari-style behavior, plus Firefox-friendly scrollbar properties.

Custom scrollbars and accessibility

Custom scrollbars should remain visible, usable and easy to understand. Avoid making the scrollbar too thin, too low contrast or completely hidden if users need to scroll through important content.

For accessibility, make sure the scrollbar thumb has enough contrast against the track and background. A subtle design is fine, but users should still be able to identify the scrollable area.

Scrollbar design tips

Keep the thumb visible

The scrollbar thumb should be clear enough for users to see and interact with.

Use enough contrast

Make sure the thumb color stands out from the track, especially in dark mode or low-light designs.

Avoid hiding important scrollbars

Hidden scrollbars can make content harder to discover, especially inside panels, modals and long containers.

Match your UI style

Use colors, radius and thickness that match your buttons, cards, borders and overall design system.

Test across browsers

Scrollbar CSS may look different across browsers, so test your design in the browsers that matter for your audience.

Keep mobile behavior in mind

Mobile browsers may display scrollbars differently or only show them while scrolling.

Scrollbar thumb vs scrollbar track

Scrollbar thumb

The thumb is the draggable part of the scrollbar. It shows the current scroll position and can be moved by the user.

A custom scrollbar thumb usually uses a visible color and a rounded shape.

Scrollbar track

The track is the background area behind the thumb. It can be subtle, transparent, light, dark or matched to the container background.

Good scrollbar design usually keeps the thumb visible while making the track subtle.

CSS scrollbar vs overflow

Scrollbar styling

Scrollbar styling changes how the scrollbar looks.

Overflow control

The overflow property controls whether scrolling happens.

.scroll-box {
  overflow-y: auto;
}

You often need overflow-y: auto; or overflow: auto; on a container before a custom scrollbar becomes visible.

Common scrollbar use cases

For websites

Customize the main page scrollbar so it matches the site design.

For dashboards

Style scrollbars inside panels, sidebars, tables, widgets and app layouts.

For modals

Create clean scrollbars inside popups, dialogs and overlay panels.

For sidebars

Customize navigation sidebars, filters, settings panels and documentation menus.

For code blocks

Add subtle scrollbars to code snippets and horizontal scroll areas.

For chat and messages

Style message panels, chat windows and notification lists.

Related tools

[fuo_related_tools limit="6" columns="3"]

Frequently Asked Questions

Is this CSS Scrollbar Customizer free?

Yes. This CSS Scrollbar Customizer is completely free to use.

No. You can customize CSS scrollbars directly in your browser without installing software.

Yes. You can customize scrollbar thumb and track colors with CSS.

The scrollbar thumb is the draggable part of the scrollbar that shows the current scroll position.

The scrollbar track is the background area behind the scrollbar thumb.

Yes. You can create thin scrollbars using scrollbar-width: thin; and custom WebKit scrollbar width values.

Yes. You can use border-radius on the scrollbar thumb to create a rounded scrollbar style.

Yes. Firefox supports scrollbar styling with scrollbar-width and scrollbar-color.

Yes. WebKit-style scrollbar pseudo-elements such as ::-webkit-scrollbar are commonly used for those browsers.

Yes. You can apply custom scrollbar CSS to a specific container instead of the full page.

Yes, but hiding scrollbars can make scrollable content harder to discover. Use hidden scrollbars carefully.

Yes. After customizing your scrollbar, you can copy the generated CSS code and use it in your project.

Yes. You can copy the generated CSS and use it in WordPress, Elementor, custom CSS fields, blocks, themes or frontend projects.

No. Scrollbar styling can vary between browsers, so it is useful to include both WebKit rules and Firefox scrollbar properties.

Explore more CSS tools

Need more CSS utilities? Explore our free design tools to create buttons, gradients, border radius values, shadows, text underlines, filters, responsive layouts and modern UI components faster.

Scroll al inicio