This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Generate CSS gradient code. Linear and radial. Copy-paste ready. With preview. Free design tool with instant browser-based results — no account, works on
Generate CSS box-shadow. Offset, blur, spread, color. Visual editor with preview. Free design tool with instant browser-based results — no account, works on
Generate border-radius. Per corner. Visual editor. For rounded corners. Free design tool with instant browser-based results — no account, works on desktop and
WebKit/Blink browsers support ::-webkit-scrollbar pseudo-elements for full visual control. Firefox uses scrollbar-width and scrollbar-color properties for simpler customization.
::-webkit-scrollbar { width } ::-webkit-scrollbar-thumb { background, border-radius }Default scrollbar is typically 15-17px. Custom scrollbars should be at least 8px wide for usability. On touch devices, scrollbars auto-hide and should not be relied upon for interaction.
Updated: July 2026
Create a slim 8px scrollbar with rounded thumb for a navigation panel.
→ ::-webkit-scrollbar { width: 8px } ::-webkit-scrollbar-thumb { background: #64748b; border-radius: 4px }
Hide scrollbar visually while maintaining scroll capability for a clean card carousel.
→ ::-webkit-scrollbar { display: none } scrollbar-width: none
Keep scrollbar thumb at least 8px wide. Users need to click/drag the thumb. Below 6px, mouse targeting becomes frustrating, especially for users with motor impairments.
Always include scrollbar-width and scrollbar-color for Firefox support alongside ::-webkit-scrollbar rules for Chrome/Safari/Edge.
Generate custom CSS scrollbar styles for WebKit and Firefox. Design thumb, track, and hover colors with live preview for themed scrollable interfaces. It applies the custom scrollbar styling (::-webkit-scrollbar { width } ::-webkit-scrollbar-thumb { background, border-radius }). For example: thin dark scrollbar for sidebar — Create a slim 8px scrollbar with rounded thumb for a navigation panel.