Tạo Thanh Cuộn CSS
Tùy chỉnh thiết kế thanh cuộn CSS với trình chỉnh sửa trực quan. Điều chỉnh màu sắc, độ rộng, bán kính góc và sao chép mã trực tiếp.
/* 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;
}Nội dung cuộn #1 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #2 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #3 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #4 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #5 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #6 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #7 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #8 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #9 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #10 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #11 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #12 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #13 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #14 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #15 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #16 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #17 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #18 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #19 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #20 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #21 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #22 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #23 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #24 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #25 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #26 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #27 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #28 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #29 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Nội dung cuộn #30 - Xem trước thanh cuộn tùy chỉnh của bạn. Cuộn để xem hoạt động.
Cách sử dụng
Đặt Kiểu
Đặt độ rộng thanh cuộn, màu sắc, bán kính góc, v.v.
Xem Trước
Kiểm tra giao diện thanh cuộn trong xem trước thời gian thực
Sao Chép CSS
Sao chép mã CSS đã tạo
Tính năng
Xem Trước Thời Gian Thực
Xem trước thanh cuộn theo thời gian thực khi bạn thay đổi cài đặt
Hỗ Trợ Đa Trình Duyệt
Tự động tạo CSS cho cả WebKit và Firefox
Trạng Thái Di Chuột & Kéo
Tùy chỉnh riêng biệt kiểu dáng trạng thái di chuột và kéo
FAQ
🔗Công cụ liên quan
Chuyển Đổi Mã Màu
Chuyển đổi giữa mã màu HEX, RGB và HSL. Sử dụng bộ chọn màu và xem trước thời gian thực để chọn màu trực quan.
Bảng Chọn Màu
Chọn màu trực quan bằng bánh xe màu và thanh trượt. Lấy và sao chép mã màu ở định dạng HEX, RGB và HSL.
Trích xuất màu từ ảnh
Tự động phát hiện màu chủ đạo từ ảnh và tạo bảng màu. Bạn cũng có thể nhấp vào bất kỳ điểm nào trên ảnh để lấy màu riêng lẻ.
Lấy màu trung bình từ ảnh
Tính màu trung bình của toàn bộ ảnh hoặc vùng được chọn. Hữu ích để chọn bảng màu hoặc màu nền cho thumbnail.
Tạo CSS Gradient
Tạo CSS gradient trực quan bằng điều khiển kéo. Hỗ trợ loại gradient tuyến tính, hướng tâm và hình nón với cài đặt sẵn.
Tạo CSS Box Shadow
Tạo CSS box-shadow trực quan bằng thanh trượt. Hỗ trợ nhiều bóng đổ và bóng đổ bên trong (inset).