Skip to main content
Penguin ToolsAlat Penguin

Generator Scrollbar CSS

Sesuaikan desain scrollbar CSS dengan editor visual. Atur warna, lebar, radius sudut, dan salin kodenya langsung.

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

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

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

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}

Konten gulir #1 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #2 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #3 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #4 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #5 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #6 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #7 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #8 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #9 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #10 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #11 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #12 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #13 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #14 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #15 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #16 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #17 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #18 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #19 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #20 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #21 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #22 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #23 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #24 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #25 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #26 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #27 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #28 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #29 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Konten gulir #30 - Pratinjau scrollbar kustom Anda. Gulir untuk melihat aksinya.

Bagikan alat ini
📖

Cara Menggunakan

Step 1

Atur Gaya

Atur Gaya

Atur lebar scrollbar, warna, radius sudut, dll.

Step 2

Pratinjau

Pratinjau

Periksa tampilan scrollbar dalam pratinjau real-time

Step 3

Salin CSS

Salin CSS

Salin kode CSS yang dihasilkan

✨

Fitur

Pratinjau Real-time

Pratinjau scrollbar secara real-time saat Anda mengubah pengaturan

Dukungan Lintas Browser

Secara otomatis menghasilkan CSS untuk WebKit dan Firefox

Status Hover & Active

Sesuaikan gaya status hover dan drag secara individual

❓

FAQ

Ya, menggunakan ::-webkit-scrollbar (Chrome/Safari/Edge) dan scrollbar-width/scrollbar-color (Firefox).

🔗Alat Terkait

🎨
Alat Desain

Konverter Kode Warna

Konversi antara kode warna HEX, RGB, dan HSL. Gunakan pemilih warna dan pratinjau waktu nyata untuk pemilihan warna yang intuitif.

🎨
Alat Desain

Pemilih Warna

Pilih warna secara intuitif menggunakan roda warna dan slider. Dapatkan dan salin kode warna dalam format HEX, RGB, dan HSL.

🎨
Alat Desain

Ekstraktor Warna Gambar

Deteksi warna dominan dari gambar secara otomatis dan hasilkan palet warna. Anda juga dapat mengklik di mana saja pada gambar untuk mengambil warna individual.

🎯
Alat Desain

Pengambil Warna Rata-rata Gambar

Hitung warna rata-rata dari seluruh gambar atau area yang dipilih. Berguna untuk memilih skema warna atau warna latar belakang thumbnail.

🌈
Alat Desain

Generator CSS Gradien

Buat gradien CSS secara visual dengan kontrol seret. Mendukung tipe gradien linear, radial, dan conic dengan preset.

🔲
Alat Desain

Generator CSS Box Shadow

Buat CSS box-shadow secara visual dengan slider. Mendukung beberapa bayangan dan bayangan inset.