::-webkit Scrollbar CSS Color Code Generator


Before using the ::-webkit scrollbar CSS color code generator to create your customized scrollbar design, you should know that it will only appear in ::-webkit supported browser versions (ie; Chrome). Visitors using a lower browser version or a different browser will see no scrollbar color changes.

Okay, let’s get started... simply decide what colors you want to use for the different parts of the scrollbar color code input fields and press the 'Generate Scollbar CSS Color Code' button.

Select the generated scrollbar CSS color source code by clicking anywhere inside the text box. Copy and paste the CSS into the head section of the source code to your page, or add the code to your existing CSS stylesheet file.


::-webkit-scrollbar * 1 *
::-webkit-scrollbar-button * 2 *
::-webkit-scrollbar-track * 3 *
::-webkit-scrollbar-track-piece * 4 *
::-webkit-scrollbar-thumb * 5 *
::-webkit-scrollbar-corner * 6 *
::-webkit-resizer * 7 *
(Credit: Image from Chris Coyier at CSS Tricks Custom Scrollbars In Webkit)
#1 width:
#1 height:
#2 button-color:
#3 track-color:
#4 track-piece-color:
#5 thumb-height: px
#5 thumb-bgcolor:
#5 thumb-border-radius: px
#6 corner-color:
#7 resizer-color: