Scrollbar Generator

Scrollbar preview

Scrollable line 1 — the quick brown fox jumps over the lazy dog.

Scrollable line 2 — the quick brown fox jumps over the lazy dog.

Scrollable line 3 — the quick brown fox jumps over the lazy dog.

Scrollable line 4 — the quick brown fox jumps over the lazy dog.

Scrollable line 5 — the quick brown fox jumps over the lazy dog.

Scrollable line 6 — the quick brown fox jumps over the lazy dog.

Scrollable line 7 — the quick brown fox jumps over the lazy dog.

Scrollable line 8 — the quick brown fox jumps over the lazy dog.

Scrollable line 9 — the quick brown fox jumps over the lazy dog.

Scrollable line 10 — the quick brown fox jumps over the lazy dog.

Scrollable line 11 — the quick brown fox jumps over the lazy dog.

Scrollable line 12 — the quick brown fox jumps over the lazy dog.

Scrollable line 13 — the quick brown fox jumps over the lazy dog.

Scrollable line 14 — the quick brown fox jumps over the lazy dog.

Scrollable line 15 — the quick brown fox jumps over the lazy dog.

Scrollable line 16 — the quick brown fox jumps over the lazy dog.

Scrollable line 17 — the quick brown fox jumps over the lazy dog.

Scrollable line 18 — the quick brown fox jumps over the lazy dog.

Scrollable line 19 — the quick brown fox jumps over the lazy dog.

Scrollable line 20 — the quick brown fox jumps over the lazy dog.

Scrollable line 21 — the quick brown fox jumps over the lazy dog.

Scrollable line 22 — the quick brown fox jumps over the lazy dog.

Scrollable line 23 — the quick brown fox jumps over the lazy dog.

Scrollable line 24 — the quick brown fox jumps over the lazy dog.

Scrollbar
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-area::-webkit-scrollbar-track {
  background: #18181b;
  border-radius: 999px;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 999px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #18181b;
}