Scrollbar Colors with CSS

You can use the capability of CSS to alter the scrollbar colors of your site. Of course, this depends on using a browser that supports scrollbar painting. There are eight scrollbar properties that can alter the color. The table below shows those properties:

Property Description Values
scrollbar-base-color Specifies the overall coloring used in the scrollbar #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-face-color Specifies the color of the scrollbar and arrowbox face #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-arrow-color Specifies the color of the arrows #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-track-color Specifies the color of the scrollbar sliding track #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-shadow-color Specifies the color of the right-side shadow of scrollbar elements #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-highlight-color Specifies the color of the left-side glossy highlights of the scrollbar elements #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-3dlight-color Specifies the color of the spectral lighting #RRGGBB (hex color values)
#RGB (RGB color values
scrollbar-darkshadow-color Specifies the color of the darkened shadow color under the scroll bar #RRGGBB (hex color values)
#RGB (RGB color values

Specify the scrollbar properties in the body element of your page style. For instance:

body { scrollbar-base-color: #005500; }

would skin the scroll bar with a dark-green theme

The folks at Iconico created a page that allows you to dynamically generate the CSS code for your body element's scrollbar properties based on color values you input. You can find the CSS scrollbar generator at:

http://iconico.com/CSSScrollbar