Design custom scrollbar styles with webkit and standard CSS scrollbar properties with live preview.
Scrollbar styling has two distinct CSS vocabularies, and this generator produces rules for both. Choose the thumb and track appearance, inspect the live scrolling sample, and copy CSS that combines the standardized scrollbar-color and scrollbar-width properties with WebKit-prefixed scrollbar pseudo-elements for finer visual control. The important surprise is that the two vocabularies do not offer matching capabilities: standard properties expose only color and coarse width choices, while prefixed selectors can describe parts such as the thumb and track. The result is a compatibility-minded stylesheet, not a promise of identical rendering.
The standard portion assigns two color values to scrollbar-color in thumb-then-track order and uses scrollbar-width for keyword thickness. These declarations style a scroll container without exposing separate CSS boxes for every scrollbar part. A browser may still choose the exact physical width and native presentation, particularly when the operating system uses overlay scrollbars.
The prefixed portion targets ::-webkit-scrollbar for the overall bar and part-specific pseudo-elements such as ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb. That vocabulary can represent dimensions, background colors, and a rounded thumb more directly. It is non-standard, so those declarations are an additional rendering path alongside standard properties, not a universal replacement.
No. The standard properties intentionally expose a small set of controls, while ::-webkit-scrollbar selectors are non-standard and are not interpreted everywhere. A system can also hide scrollbars until scrolling or draw them as overlays. Use the preview to choose values, then test an actually overflowing element in each browser and operating system you support.
Yes. Apply scrollbar-color and scrollbar-width to the intended scroll container, then qualify each WebKit pseudo-element with that container's selector, such as .results::-webkit-scrollbar. The element must create a scrolling box, commonly through overflow and constrained dimensions. Avoid an unqualified selector if the page's other scrollbars should retain their normal appearance.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.