tl;dr
- 味気ないスクロールバーをcssでデザインして遊ぶ。
百聞は一見に如かず。
See the Pen Scrollbar Design Test by lemon2003 (@lemon2003) on CodePen.
グラデとかの使い方間違ってる？
ダｓｓｓｓっさ。 
解説
::-webkit-scrollbar
width で縦スクロールバーの幅、
height で横スクロールバーの高さを指定できる。
::-webkit-scrollbar-track
スクロールバー全体のスタイルを指定する。
::-webkit-scrollbar-thumb
thumb は 親指 
。
スクロールするときにマウス(カーソル)でつかむところ。
参考
- Webkit独自拡張でスクロールバーのデザインを変更する ｜ DevelopersIO
- スクロールバーをデザインする ::-webkit-scrollbar に関しての覚え書き | Unformed Building
最後に & お願い
-webkit とついているように、chromeなどでのみ動きます。
firefoxもなんかいろいろ弄ればできるっぽいけど、今回は割愛。（書き足すかも？）
追記 at:2019/01/05
Firefox 64 (2018/12/11 released) より、プレフィックスなしでのサポートになっています。
Can I use... Support tables for HTML5, CSS3, etc
コメントありがとうございます！: コメントより
こんなこともできるよっていう風にいろいろcss弄ったけど、センスのないものしかできなかったので、
いいデザインができたら、こんなのどう？っていう感じでコメントしていただければ幸いです！ (完全に丸投げ。)