DevToolBox

CSSスクロールバーカスタマイズ

Webkitベースのブラウザ用スクロールバーCSSを生成します。色・幅・角丸を自由にカスタマイズ。

基本設定

カラー設定

プレビュー

スクロールしてスクロールバーを確認してください。

ダミーテキスト 1

ダミーテキスト 2

ダミーテキスト 3

ダミーテキスト 4

ダミーテキスト 5

ダミーテキスト 6

ダミーテキスト 7

ダミーテキスト 8

ダミーテキスト 9

ダミーテキスト 10

ダミーテキスト 11

ダミーテキスト 12

ダミーテキスト 13

ダミーテキスト 14

ダミーテキスト 15

ダミーテキスト 16

ダミーテキスト 17

ダミーテキスト 18

ダミーテキスト 19

ダミーテキスト 20

ダミーテキスト 21

ダミーテキスト 22

ダミーテキスト 23

ダミーテキスト 24

ダミーテキスト 25

ダミーテキスト 26

ダミーテキスト 27

ダミーテキスト 28

ダミーテキスト 29

ダミーテキスト 30

ダミーテキスト 31

ダミーテキスト 32

ダミーテキスト 33

ダミーテキスト 34

ダミーテキスト 35

ダミーテキスト 36

ダミーテキスト 37

ダミーテキスト 38

ダミーテキスト 39

ダミーテキスト 40

ダミーテキスト 41

ダミーテキスト 42

ダミーテキスト 43

ダミーテキスト 44

ダミーテキスト 45

ダミーテキスト 46

ダミーテキスト 47

ダミーテキスト 48

ダミーテキスト 49

ダミーテキスト 50

生成されたCSS

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #2d2d2d;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888888 #2d2d2d;
}

CSSスクロールバーカスタマイズとは？

Webkitベースのブラウザ（Chrome、Safari、Edge）でスクロールバーの見た目をカスタマイズするCSSを生成します。 Firefoxにも対応した基本的なスタイルも含まれます。

トラック（背景）、サム（つまみ）、ホバー時の色を自由に設定でき、角丸や幅も調整可能です。 モダンなWebデザインに最適なスクロールバーを簡単に作成できます。