[CSS] Customizable Scrollbars

Contact me at if you need help of if something is wrong.

/!\These work only for Google Chrome. /!\
Try to replace "webkit" by "moz" for Mozilla Firefox.

Customizable Scrollbars

(To be put between <style> tag)

Pointed Borders

Black Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 2px rgba(50,50,50,1);background-color:rgba(50,50,50,1);} ::-webkit-scrollbar {width:10px;background-color:rgba(0,0,0,1);} ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,1);background-color: #000000;}

Small Black Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 2px rgba(50,50,50,1);background-color:rgba(50,50,50,1);} ::-webkit-scrollbar {width:8px;background-color:rgba(0,0,0,1);} ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,1);background-color: #000000;}

Colored Scrollbar (Red)

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 2px rgba(50,50,50,1);background-color:#F5F5F5;} ::-webkit-scrollbar {width:10px;background-color:#F5F5F5;} ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,1);background-color: #FF0000;}

Bordered Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#000000;} ::-webkit-scrollbar-thumb {background-color: #000000;border:2px solid #808080}

Bordered Scrollbar Container

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;border:2px solid #000000} ::-webkit-scrollbar {width:10px;background-color:#000000;} ::-webkit-scrollbar-thumb {background-color: #000000}

Two-Shaded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb {background-color: #808080;background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(.5, rgba(255, 255, 255, .2)),color-stop(.5, transparent), to(transparent));}

Two-Colored Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb {background-image: -webkit-gradient(linear, 0 0, 0 100%,color-stop(0.5, rgba(1, 147, 254, 1)),color-stop(.5,rgba(255, 223, 0, 1)), from(#0193FE),to(#FFDF00));}

/!\ You also have to use the "rgba" color code for the two "color-stop" corresponding to each of the colors. /!\

Diagonal-Shaded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #FF9900;background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent)};}

Diagonal Two-Colored Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-image: -webkit-linear-gradient(45deg,rgba(255, 223, 0, 1) 25%,#0193FE 25%,#0193FE 50%,rgba(255, 223, 0, 1)50%,rgba(255, 223, 0, 1) 75%, #0193FE 75%,#0193FE)};}

/!\ The first (and third) color uses the basic "#" color code while the second (and fourth) color uses the "rgba" color code. /!\

Horizontal-Shaded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #808080;background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%, transparent 75%,transparent)};}

Horizontal Two-Colored Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-image: -webkit-linear-gradient(90deg,rgba(255, 223, 0, 1) 25%,#0193FE 25%,#0193FE 50%,rgba(255, 223, 0, 1)50%,rgba(255, 223, 0, 1) 75%, #0193FE 75%,#0193FE)};}

/!\ The first (and third) color uses the basic "#" color code while the second (and fourth) color uses the "rgba" color code. /!\

Shading Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.9);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb {background-color: #FFFFFF;background-image: -webkit-linear-gradient(90deg,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 25%,transparent 100%,rgba(0, 0, 0, 1) 75%,transparent)}

/!\ Use the "rgb" code for the colors, they must be shadings of the same color. /!\

Top-Shaded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb {background-color: #808080;background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(0,255,0)),color-stop(0.72, rgb(0,176,0)),color-stop(0.86, rgb(0,113,0)));}

/!\ Use the "rgb" code for the colors, they must be shadings of the same color. /!\

Middle-Shaded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.9);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb {background-color: #FF0000;background-image: -webkit-linear-gradient(90deg,transparent, rgba(0, 0, 0, 0.5) 50%,transparent,transparent);}

Tip-Shaded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,0.9);background-color:#FFFFFF;} ::-webkit-scrollbar {width:10px;background-color:#FFFFFF;} ::-webkit-scrollbar-thumb {background-image: -webkit-gradient(linear,40% 0%,75% 84%,from(#0180FE),to(#0180FE),color-stop(.6,#03BEFC));}

/!\ Use the "rgb" code for the colors, they must be shadings of the same color. /!\

Rounded Borders

Rounded Scrollbar

 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 2px rgba(50,50,50,1);background-color:rgba(50,50,50,1);border-radius:10px;} ::-webkit-scrollbar {width:10px;background-color:rgba(50,50,50,1);} ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0px 0px 6px rgba(0,0,0,1);background-color: #000000;border-radius: 10px;}