Stylish Webkit Scrollbar with CSS

Webkit scrollbar made with gradients. no images. but looks awesome!

Align my contents to center of the screen!

.wrapper
{
    text-align: center;
    width: 500px;
    margin: auto;
}

Now Scrollbar

.scrollbar
{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 500px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

overflow-y: scroll;

is used make it possible to scroll vertically!

.force-overflow
{
    min-height: 450px;
}

userd to force overflow!

Below is important that what made our cute scrollbar!

::-webkit-scrollbar-track
{
    background: #fc6286;
background: -moz-linear-gradient(left,  #fc6286 0%, #860221 50%, #660018 51%, #e1093b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fc6286), color-stop(50%,#860221), color-stop(51%,#660018), color-stop(100%,#e1093b));
background: -webkit-linear-gradient(left,  #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
background: -o-linear-gradient(left,  #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
background: -ms-linear-gradient(left,  #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
background: linear-gradient(to right,  #fc6286 0%,#860221 50%,#660018 51%,#e1093b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc6286', endColorstr='#e1093b',GradientType=1 );

}

::-webkit-scrollbar { width: 10px; background-color: #000; }

::-webkit-scrollbar-thumb { background: #aebcbf; background: -moz-linear-gradient(-45deg, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); background: -webkit-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background: -o-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background: -ms-linear-gradient(-45deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); background: linear-gradient(135deg, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=1 ); -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px cursor:pointer; }