CHROME WEB STORE SCROLLBAR CSS

<style> ::-webkit-scrollbar { width: 10px; background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(202,202,202,0.07)),color-stop(100%,rgba(229,229,229,0.07))); background: -webkit-linear-gradient(left,rgba(202,202,202,0.07) 0%,rgba(229,229,229,0.07) 100%); -webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff; -moz-box-shadow: 0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff; box-shadow: 0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff; background-color: #e5e5e5; } ::-webkit-scrollbar, ::-webkit-scrollbar-thumb { overflow: visible; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #a6a6a6; } Pseudo ::-webkit-scrollbar-thumb element ::-webkit-scrollbar-thumb { background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(233,233,233,0.05)),color-stop(100%,rgba(221,221,221,0.05))); background: -webkit-linear-gradient(left,rgba(233,233,233,0.05) 0%,rgba(221,221,221,0.05) 100%); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,.05); -moz-box-shadow: 0 2px 1px 0 rgba(0,0,0,.05); box-shadow: 0 2px 1px 0 rgba(0,0,0,.05); background-color: #e9e9e9; } ::-webkit-scrollbar, ::-webkit-scrollbar-thumb { overflow: visible; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #a6a6a6; } Pseudo ::-webkit-scrollbar-button element .webstore-si-ti-Db::-webkit-scrollbar-button { height: 0; display: block; background-color: transparent; } </style>

LIVE DEMO

Google always surprised us with its new designs which we called material designing. I always like the all designs that create by Google...they are simple and classic. the browser GoogleChrome which have its own WebStore. Here is code of scrolbar of right sidebar of Chrome WebStore.

the look of scrollbar of chrome

So here is code.

If you want

     for your wordpress site.
     for your blogspot.