Scrollbar.app

スクロールバーの CSS ジェネレーター

ツールを使う

2023/03/18

概要

Scrollbar.app は、スクロールバーを装飾するための CSS ジェネレーターです。

プレビューを見ながらスクロールバーの色や幅などを入力できます。

また、リアルタイムに CSS が生成されます。

説明

※ 後日記載致します。

このような CSS が生成されます。

body {
  --sb-track-color: #232E33;
  --sb-thumb-color: #6BAF8D;
  --sb-size: 10px;

  scrollbar-color: var(--sb-thumb-color)
                   var(--sb-track-color);
}

body::-webkit-scrollbar {
  width: var(--sb-size)
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 10px;
}