Buat Scrollbar CSS Kustom

Rancang bilah gulir yang indah dan modern yang sesuai dengan gaya situs web Anda dengan generator intuitif kami. Tidak diperlukan keterampilan pengkodean!

Mulai Menyesuaikan Lihat Contoh

Panel Kontrol

8px
0px

Preview

Konten Pratinjau Bilah Gulir

Ini adalah area demonstrasi untuk bilah gulir kustom Anda. Sesuaikan pengaturan di sebelah kiri untuk melihat perubahan waktu nyata.

Feature 1

Bilah gulir yang sepenuhnya dapat disesuaikan untuk situs web dan aplikasi modern.

Feature 2

Dukungan lintas browser dengan awalan otomatis untuk browser yang berbeda.

Contoh konten teks panjang: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lebih banyak konten teks: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Bilangan bulat dalam mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam setara. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. Dalam hac habitasse platea dictumst.

Akhir teks: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Kode CSS yang Dihasilkan

Disalin ke clipboard!

Fitur Kuat

Sepenuhnya Dapat Disesuaikan

Sesuaikan setiap aspek bilah gulir Anda termasuk lebar, warna, jari-jari, dan batas agar sesuai dengan desain situs web Anda dengan sempurna.

Dukungan Lintas Browser

Hasilkan kode CSS yang berfungsi di semua browser modern termasuk Chrome, Firefox, Safari, dan Edge.

Preset Siap Pakai

Mulailah dengan desain profesional menggunakan koleksi preset scrollbar kami yang dikuratori untuk implementasi cepat.

Pratinjau waktu nyata

Lihat dengan tepat bagaimana bilah gulir Anda akan terlihat saat Anda melakukan penyesuaian dengan panel pratinjau interaktif kami.

Dapatkan kode CSS minimal yang diformat dengan baik yang siap diintegrasikan ke dalam proyek Anda tanpa pembengkakan.

Desain Responsif

Buat bilah gulir yang beradaptasi sempurna dengan berbagai ukuran layar dan perangkat untuk pengalaman pengguna yang konsisten.

Cara Penggunaan

1

Sesuaikan bilah gulir Anda

Gunakan panel kontrol untuk menyesuaikan lebar, warna, jari-jari, dan properti lain dari bilah gulir Anda hingga sesuai dengan visi desain Anda.

2

Salin CSS yang Dihasilkan

Setelah Anda puas dengan pratinjau, klik tombol "Salin CSS" untuk menyalin kode yang dihasilkan ke clipboard Anda.

3

Tambahkan ke Proyek Anda

Tempelkan kode CSS ke stylesheet proyek Anda atau gunakan sebaris. Terapkan kelas ke elemen apa pun untuk melihat bilah gulir kustom Anda beraksi.

Contoh Scrollbar

Contoh bilah gulir biru modern dengan sudut membulat. Sempurna untuk situs web dan aplikasi perusahaan.

Bilah gulir ini menggunakan trek biru muda dengan ibu jari biru lebih gelap yang berubah warna saat melayang.

Gulir ke bawah untuk melihat efek lengkapnya. Ibu jari memiliki jari-jari 5px untuk tepi membulat yang halus.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Biru Modern

Bilah gulir biru ramping dengan tepi membulat

Contoh bilah gulir gelap halus dengan gaya minimal. Ideal untuk situs web yang banyak konten.

Bilah gulir ini menggunakan trek abu-abu yang sangat terang dengan ibu jari abu-abu sedang yang menjadi gelap saat melayang.

Gulir ke bawah untuk melihat efek lengkapnya. Ibu jari memiliki sedikit jari-jari 3px untuk tepi lembut.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Gelap Halus

Bilah gulir gelap minimalis untuk situs konten

Contoh bilah gulir hijau cerah dengan gaya yang berani. Bagus untuk situs web ramah lingkungan atau terkait kesehatan.

Bilah gulir ini menggunakan trek hijau muda dengan jempol hijau cerah yang menjadi gelap saat melayang.

Gulir ke bawah untuk melihat efek lengkapnya. Ibu jari memiliki jari-jari 6px untuk tepi membulat yang jelas.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Hijau Cerah

Bilah gulir hijau tebal untuk situs bertema ramah lingkungan

Contoh scrollbar ungu bergaya dengan desain modern. Sempurna untuk situs web kreatif atau portofolio.

Bilah gulir ini menggunakan trek ungu muda dengan ibu jari ungu yang lebih dalam yang menjadi gelap saat melayang.

Gulir ke bawah untuk melihat efek lengkapnya. Ibu jari memiliki jari-jari 4px untuk tepi membulat yang bersih.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Ungu Bergaya

Bilah gulir ungu modern untuk proyek kreatif

Pertanyaan yang Sering Diajukan

Related Tools

Generator Transisi CSS3

Transisi opasitas yang mulus

Konverter Stylus ke CSS

Ubah kode SCSS Anda menjadi CSS. Cepat, mudah, dan aman.

Hasilkan Transformasi CSS3 dengan Mudah

Alat yang kuat dan intuitif untuk membuat transformasi CSS3 yang kompleks tanpa menulis kode. Visualisasikan perubahan secara real-time dan salin CSS yang dihasilkan untuk digunakan dalam proyek Anda.

Teks ke ASCII

Konversi teks ke kode ASCII dengan mudah

Pembuat CSS Bayangan Teks Online

Buat Efek Teks Gradien yang Menakjubkan untuk Situs Web Anda

Konverter Biaya

Konversi pengukuran muatan listrik antara unit yang berbeda dengan presisi