EN
PortuguêsEnglishEspañol
All tools
Developer tools 100% free

CSS scrollbar generator

Choose the colors and the shape and scroll the sample box. The code combines the new properties with the older Chrome and Safari version.

How to use

Thank you so much for helping!

Every donation helps pay for the servers and keeps the tools free for everyone. Pick or type an amount:

Secure payment by Stripe. Opens in a new tab.
Back to CSS and design

A scrollbar in your site's colors







  
Available in: PortuguêsEnglish


Advertisement



  
CSS scrollbar generator: what it is for
A scrollbar in your brand colors gives the site a better finish, but the CSS has changed: today there are the standard scrollbar-color and scrollbar-width properties, supported by Firefox, Chrome and Edge 121 and Safari 26.2, while older versions only understand ::-webkit-scrollbar.
This generator builds both ways separated by @supports, as Chrome's documentation recommends, because when scrollbar-color is set Chrome ignores the old rules. You choose the track and thumb colors, the width, the corners and the hover color, and test it in the sample box.
How to use
  1. Choose the track and thumb colors.
  2. Adjust the width and corners.
  3. Copy the CSS for the whole page or for a box.
When to use it
  • A scrollbar in your brand colors.
  • Scrolling boxes inside the page.
  • Dark-themed dashboards and apps.

  
Frequently asked questions
Does it work in every browser?
The standard scrollbar-color and scrollbar-width properties work in Firefox, in Chrome and Edge from version 121 and in Safari 26.2. For earlier versions, the code also includes the ::-webkit-scrollbar rules, which change the width, corners and hover color.
Why does the code use @supports?
In Chrome, when scrollbar-color is set, the ::-webkit-scrollbar rules are ignored. @supports applies the standard properties only where they exist and leaves the old rules for browsers that don't know them.
Does customizing the scrollbar hurt accessibility?
It can if it gets too thin or has no contrast with the track. Keep a width that's easy to grab with the mouse and a color that stands out from the background.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

  
Similar tools

  
Scroll reveal animation (pure CSS)Generate the effect of elements appearing as the page scrolls (scroll reveal) in pure CSS, with animation-timeline: view(): fade in, slide up, slide in from the sides, grow or unblur, with adjustable distance and scroll range, and without hiding anything in browsers that do not support it yet.Open →
CSS clamp() calculator for fluid typographyCalculate the CSS clamp() for text and spacing that grows with the screen width: enter the size on mobile and on desktop and the screen widths, and copy the value in rem, with a preview and a zoom accessibility warning.Open →
Google Fonts pairingsTry Google Fonts pairings for your website's headings and body text: pick a ready-made pair or build your own, see the preview with your text and copy the loading link and the CSS.Open →
Color contrast checker (WCAG)Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.Open →
Color converterConvert colors between HEX, RGB, HSL and CMYK and see lighter and darker shades.Open →
HEX color to Tailwind classFind out which color in the default Tailwind CSS (v3) palette is closest to your HEX or RGB color, with the perceptual distance and the five nearest options, or use the exact value with bracket syntax.Open →






The tools are provided as is, without warranty. We are not responsible for the results or for how they are used.