Darryl Huffman's

Scrollbar Generator

Global Scrollbar Width

Click on the part of the scrollbar you want to edit on the left to get started.

Styles

Styles applied to this part of the scrollbar by default.

Display
Color
Border-Radius
Box-Shadow

Styles on Hover

These are the styles that will take place on hover.

Color
Border-Radius
Box-Shadow

CSS Output

/* Nothing here yet! */

About & Instructions

Hello all - this was a simple project I threw together quite a while ago that seems to have picked up a bit of traction. I have decided to update it, since the previous version relied on scripts that weren't hosted on HTTPS - plus it really needed a face lift!

How to use it: click on the part of the scrollbar you want to edit on the left side, and the middle area will be populated with the custom styling options available for that part of the scrollbar. These options include color, width, hover effects, and many other options. A live preview of your custom scrollbar will appear on the right-most side of the editor & this websites scrollbar will match it as well - talk about live editing.

Once you like how your scrollbar is looking, the box on the right contains your CSS code! Just select all the code and copy it. Then go to your CSS document and paste it in and you're ready to go!