Format & web

Scrollbar Customizer

Design a custom scrollbar with live preview — exports CSS for both Chrome/Safari (webkit) and Firefox.

Input

Width

10px

Radius

6px

Track color

#10161c

Thumb color

#34d399

Hover color

#6ee7b7

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

7. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

8. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

9. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

11. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

14. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

15. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

18. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

20. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

21. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

22. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

23. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuộn để xem thanh cuộn tùy chỉnh của bạn hoạt động.

Result

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #34d399 #10161c;
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #10161c;
}
*::-webkit-scrollbar-thumb {
  background: #34d399;
  border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #6ee7b7;
}

Related tools

Web & marketing

Scrollbar Customizer

Related tools

What is my IP?

Campaign URL Builder

Meta Tag Generator