This is the scrollbar preview area. Here you can see the customized scrollbar effect in real time.
CSS custom scrollbars are an important way to enhance visual consistency across your website. Through the ::-webkit-scrollbar pseudo-element, developers can precisely control every detail of the scrollbar.
WebKit browsers support full scrollbar customization, including the track, thumb, buttons, and corner. Firefox provides more limited but standardized customization through the scrollbar-width and scrollbar-color properties.
In production projects, it is recommended to provide both WebKit and Firefox CSS to ensure cross-browser compatibility. Also note that excessive customization may impact accessibility.
The scrollbar width is typically recommended between 8-12px, which ensures operability without taking up too much space. The thumb color should be consistent with the page theme, and the hover state can provide visual feedback.
For dark themes, the track usually uses a color slightly darker than the background, while the thumb uses a medium brightness color, and the hover state uses a brighter color. This layering helps users quickly locate their scroll position.
Mobile browsers have limited support for scrollbar customization, so it is recommended to use the default system style or hide the scrollbar on mobile. On desktop, custom scrollbars can significantly enhance the refinement of a website.
The CSS code generated by this tool can be copied directly into your project. All color values are output in standard CSS format, supporting hex, rgb, and rgba formats.
If you have more complex needs, such as setting different scrollbar styles for different elements, simply replace the selector in the generated CSS with your target element selector.
Finally, a reminder: when modifying scrollbar styles, be sure to maintain sufficient contrast so that all users (including those with visual impairments) can easily identify and use the scrollbar.
/* Target your element */
.element::-webkit-scrollbar {
width: 10px;
}
.element::-webkit-scrollbar-track {
background: #1e293b;
border-radius: 5px;
border: 1px solid #334155;
}
.element::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 5px;
}
.element::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.element::-webkit-scrollbar-thumb:active {
background: #94a3b8;
}
/* Target your element */
.element {
scrollbar-width: thin;
scrollbar-color: #475569 #1e293b;
}
/* Universal compatible - WebKit & Firefox */
.element {
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #475569 #1e293b;
}
/* WebKit (Chrome/Safari/Edge) */
.element::-webkit-scrollbar {
width: 10px;
}
.element::-webkit-scrollbar-track {
background: #1e293b;
border-radius: 5px;
border: 1px solid #334155;
}
.element::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 5px;
}
.element::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.element::-webkit-scrollbar-thumb:active {
background: #94a3b8;
}
This CSS custom scrollbar style generator helps you quickly create beautiful custom scrollbars without manually writing complex CSS code. Here is a detailed usage guide:
In the parameter panel on the right, you can adjust various properties of the scrollbar. The width slider controls the overall width of the scrollbar, and it is recommended to set it between 8-12px for optimal operability. The thumb radius and track radius control the roundness of the scrollbar, with 0px being a right angle and 15px being the maximum radius.
Use the color pickers to set the track background, track border, thumb default color, thumb hover color, and thumb active color. It is recommended to choose a color scheme that coordinates with your page theme. For dark themes, the track usually uses a color slightly darker than the background, while the thumb uses a medium brightness color.
The preview area on the left will reflect your parameter adjustments in real time. You can scroll the preview area to see the customized scrollbar effect. If the effect is not satisfactory, you can continue adjusting the parameters until you are satisfied.
Click the "Copy CSS" button to copy the code to your clipboard. The code includes both WebKit and Firefox standards to ensure proper display across different browsers. You can replace .element with your actual target element selector.
CSS custom scrollbars have a wide range of applications in web development. Here are several typical use cases:
Dark Theme Websites: Dark themes have become a mainstream trend in modern web design. Default scrollbars often appear jarring against dark backgrounds. By customizing scrollbar styles, you can make the scrollbar blend seamlessly with the dark theme, enhancing overall visual consistency. For example, set the track to dark gray and the thumb to light gray, with a brighter color on hover.
Custom Scroll Containers: In chat applications, file managers, data tables, and other scenarios that require a lot of scrolling, custom scrollbars can significantly improve user experience. For example, in a chat application, you can set a smaller scrollbar width to save space while maintaining sufficient operability.
Brand Consistency: For corporate websites and brand products, maintaining visual consistency is crucial. By keeping the scrollbar color consistent with the brand color, you can demonstrate the brand's professionalism and attention to detail. For example, set the thumb color to the primary brand color and darken it on hover.
::-webkit-scrollbar Pseudo-Elements Explained: WebKit provides a complete set of pseudo-elements for customizing scrollbars. ::-webkit-scrollbar controls the scrollbar as a whole, ::-webkit-scrollbar-track controls the track, ::-webkit-scrollbar-thumb controls the thumb, ::-webkit-scrollbar-button controls the end buttons, and ::-webkit-scrollbar-corner controls the corner where tracks intersect. By combining these pseudo-elements, you can achieve very rich scrollbar effects.
Firefox's scrollbar-color and scrollbar-width: Firefox adopts a more concise standardized approach. scrollbar-color accepts two color values, the first being the thumb color and the second the track color. scrollbar-width accepts three values: auto (default), thin (narrow scrollbar), and none (hidden scrollbar). Although Firefox's customization capabilities are limited, they are sufficient for most scenarios.
Accessibility Considerations: When customizing scrollbars, be sure to maintain sufficient color contrast so that users with visual impairments can easily identify them. The WCAG guidelines recommend a contrast ratio of at least 3:1 for UI components. Also, avoid setting the scrollbar width too small (less than 8px) to avoid impacting users' operational precision. For scenarios where the scrollbar needs to be completely hidden, it is recommended to use overflow: hidden instead of scrollbar-width: none, as the latter may not completely disable scrolling in some browsers.
Not exactly the same. WebKit browsers (Chrome, Safari, Edge) use the ::-webkit-scrollbar pseudo-elements for detailed customization; Firefox uses scrollbar-width and scrollbar-color properties for limited customization. It is recommended to provide both sets of CSS for cross-browser compatibility.
The ::-webkit-scrollbar pseudo-elements are supported in WebKit and Blink-based browsers, including Chrome (all versions), Safari, Opera, and the new Edge. Firefox does not support these pseudo-elements and requires scrollbar-color and scrollbar-width properties instead.
Yes. In WebKit browsers, set ::-webkit-scrollbar { display: none; } to hide the scrollbar while preserving scroll functionality. In Firefox, use scrollbar-width: none; for the same effect. Note that this may reduce accessibility.
No. CSS custom scrollbars are purely stylistic properties and do not introduce any performance overhead. In fact, reducing scrollbar width slightly can save space for content areas and improve user experience.
Simply attach the ::-webkit-scrollbar pseudo-element to a specific selector, e.g., .my-box::-webkit-scrollbar { width: 8px; }. If no element is specified, the styles will apply to the page's main scrollbar.