CSS Scrollbar Generator
With this generator, you can easily customize the appearance and colors of scrollbars on your website. Simply adjust the options below and the preview area will update instantly so you can see the changes in real time. The required CSS code is generated automatically, allowing you to copy and paste it directly into your project. Note: Scrollbar styling in Chrome, Edge, and Safari requires the -webkit- vendor prefix. Firefox uses a different set of properties, which currently offer more limited customization options.
CSS Scrollbar Generator
About CSS Scrollbar Generator
A CSS scrollbar generator is a online webtool that allows you to create custom scrollbar styles for your web pages using CSS. Web browsers typically display default scrollbars for web content, but with CSS, you can customize the appearance of these scrollbars to better match the design and aesthetics of your website.
Our CSS scrollbar generator provides a user-friendly interface where you can adjust various scrollbar properties, such as:
Width and height: You can set the dimensions of the scrollbar, including the track (the background) and the thumb (the draggable part).
Colors: You can choose colors for the scrollbar background, thumb, and various states like hover and active.
Border and border-radius: You can define the border properties of the scrollbar, as well as its rounded corners using the border-radius property.
Shadow and glow effects: Some generators allow you to add shadows or other visual effects to the scrollbar.
Scrollbar track and thumb behavior: You can control how the scrollbar reacts when a user interacts with it, like changing colors on hover or click.
Once you customize the scrollbar appearance using the generator, it will generate the CSS code necessary to apply the chosen style to your website. You can then add this CSS code to your web pages to implement the custom scrollbar design.
Customizing scrollbars can be a way to enhance the user experience and make your website or web application more visually appealing. However, it's essential to keep accessibility in mind when making such customizations, as some users may rely on default browser scrollbars for navigation. It's a good practice to test your custom scrollbar styles to ensure they don't interfere with the usability of your site for all users.
What is a CSS scrollbar?
A CSS scrollbar is the visual component that appears when content overflows its container. CSS lets you override its appearance - changing colors, width, border radius, and more - to match your design system.
How this generator works
Adjust any control on the left panel and the three preview panels update instantly. ScrollCraft generates correct CSS rules for WebKit browsers and the simpler Firefox API simultaneously.
Color controls explained
Each color control has both a native color picker and a hex input. The thumb has three states: default, hover, and active - giving you fine-grained control over interactivity feedback.
Sizing & radius tips
Widths between 4–8px feel modern and minimal; 10–16px are more traditional. Setting track and thumb radius equal to half the width creates a perfect pill shape.
The two browser APIs. The WebKit pseudo-element API (::-webkit-scrollbar) gives granular control and works in Chrome, Edge, and Safari. The Firefox API (scrollbar-color + scrollbar-width) is simpler, supporting two colors. ScrollCraft outputs both automatically.
Selector scope. Use * globally, .my-scroll for a component, or body for the main page scroll.
Shadow glow effects. The shadow blur control adds a box-shadow to the thumb. This is WebKit-only with no Firefox equivalent.
Frequently Asked Questions
How do I style a scrollbar in CSS?
For Chrome, Edge, and Safari, use the WebKit pseudo-element API. At minimum you need three rules:
::-webkit-scrollbar to set the width,
::-webkit-scrollbar-track to style the background rail, and
::-webkit-scrollbar-thumb to style the draggable handle.
For Firefox, use scrollbar-color (which accepts two color values - thumb then track) and scrollbar-width (either thin, auto, or none).
This generator outputs both sets of rules automatically so you can paste a single block of CSS into your project.
Does CSS scrollbar styling work in all browsers?
There are two separate APIs and neither covers every browser on its own.
The WebKit pseudo-element API (::-webkit-scrollbar and related selectors) works in Chrome, Edge, and Safari, which together account for the vast majority of desktop traffic.
Firefox uses its own simpler API: scrollbar-color and scrollbar-width, which give you color control and a width choice but not the granular styling available in WebKit.
Internet Explorer is not supported by either approach.
The safest approach is to include both APIs, which is what this generator does when the "Include Firefox support" option is enabled.
What is the difference between the scrollbar track and the scrollbar thumb?
The track is the full-length background channel that the scrollbar sits inside - it spans the entire scrollable area and is always visible when a scrollbar is present.
The thumb is the smaller draggable handle that moves within the track to indicate your current scroll position. Its size is proportional to how much of the content is visible: the more content there is relative to the container, the smaller the thumb.
In CSS, these are styled separately using ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb.
How do I make a scrollbar thinner in CSS?
For WebKit browsers, set a smaller value on the ::-webkit-scrollbar pseudo-element - widths between 4px and 8px give a slim, modern look.
For example: ::-webkit-scrollbar { width: 6px; }.
For Firefox, add scrollbar-width: thin; to the scrollable element, which renders a narrower scrollbar without specifying an exact pixel value.
Setting scrollbar-width: none in Firefox (or ::-webkit-scrollbar { display: none; } in WebKit) hides the scrollbar entirely while still allowing the element to scroll.
How do I hide a scrollbar but keep scrolling working?
You can hide the scrollbar visually while preserving scroll functionality by combining two rules.
For WebKit browsers: ::-webkit-scrollbar { display: none; }.
For Firefox: scrollbar-width: none; on the scrollable element.
For cross-browser coverage, also add -ms-overflow-style: none; for older Edge versions.
Be mindful of accessibility - hidden scrollbars can make it unclear to users that content is scrollable, so this technique works best when scrollability is signalled by other visual cues such as truncated content or scroll indicators.
How do I apply a custom scrollbar to only one element?
Target the specific element's class or ID instead of using a global selector.
For WebKit: .my-container::-webkit-scrollbar { width: 8px; } and
.my-container::-webkit-scrollbar-thumb { background: #888; }.
For Firefox: add scrollbar-color: #888 #f0f0f0; scrollbar-width: thin; directly to .my-container.
In this generator, choose "Class" from the Selector dropdown and enter your class name to produce scoped CSS automatically.
How do I add hover and active states to a scrollbar thumb?
Use the ::-webkit-scrollbar-thumb:hover and ::-webkit-scrollbar-thumb:active pseudo-selectors to change the thumb colour when a user hovers over or clicks it.
For example: ::-webkit-scrollbar-thumb:hover { background: #555; }.
This gives useful interactivity feedback - a common pattern is a lighter default colour that darkens on hover and darkens further on click.
Firefox's scrollbar-color property does not support hover or active states separately.
How do I make a scrollbar rounded in CSS?
Apply border-radius to the ::-webkit-scrollbar-thumb and optionally to ::-webkit-scrollbar-track.
To create a fully rounded pill-shaped thumb, set the border-radius to half the scrollbar width or higher - for a 10px wide scrollbar, border-radius: 5px or more creates a perfect pill.
This is a WebKit-only feature; Firefox does not support border-radius on scrollbar elements.
Can I add a shadow or glow effect to a CSS scrollbar?
Yes, but only in WebKit browsers. Apply box-shadow to the ::-webkit-scrollbar-thumb pseudo-element.
For example: ::-webkit-scrollbar-thumb { box-shadow: 0 0 6px rgba(0,0,0,0.4); }.
This can create a subtle glow effect, particularly effective on dark-themed interfaces.
There is no equivalent in the Firefox scrollbar API, so shadow effects will simply not appear in Firefox - which is fine as long as your base scrollbar colours still look good without it.
What scrollbar width should I use for a modern design?
As a general guide, 4–8px feels contemporary and minimal and suits clean, content-focused designs.
8–12px is a good middle ground - noticeable and easy to grab on both desktop and touch devices.
12–16px or wider feels more traditional and is useful in applications where the scrollbar is a primary navigation element, such as code editors or data tables.
Setting the thumb's minimum height (via ::-webkit-scrollbar-thumb { min-height: 30px; }) prevents the thumb from becoming too small on long pages and improves usability.