CSS Scrollbar Generator [2025]
Visually design custom scrollbars for your website using CSS pseudo-elements. Adjust colors, size, and radius with a live preview.
Scrollbar Settings
Use HEX or RGBA (e.g., #rrggbbaa).
Live Preview
Note: Scrollbar styling primarily works in WebKit browsers (Chrome, Safari, Edge). Firefox has limited support via `scrollbar-color` and `scrollbar-width` (see generated CSS comments).
Generated CSS
/* Apply this class to the element whose scrollbar you want to style */
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #ffffff00; /* RE-ADDED */
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
/* NEW: Track Shadow */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #888888;
border-radius: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #555555;
}
.custom-scrollbar::-webkit-scrollbar-thumb:active {
background-color: #333333;
}
.custom-scrollbar::-webkit-scrollbar-corner {
background: #f1f1f1;
}
/* Firefox fallback (limited styling) */
/*
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #888888 #f1f1f1;
}
*/Apply the `.custom-scrollbar` class to the scrollable element (e.g., `body`, a `div` with `overflow: auto`).
What are Custom CSS Scrollbars?
By default, browser scrollbars have a standard appearance determined by the operating system. However, WebKit-based browsers (like Chrome, Safari, Edge) allow developers to customize the look and feel of scrollbars using specific CSS pseudo-elements like `::-webkit-scrollbar`, `::-webkit-scrollbar-track`, and `::-webkit-scrollbar-thumb`.
This allows you to match the scrollbar's design to your website's theme, creating a more cohesive user experience. You can control the width, colors, border-radius, and hover states of the scrollbar components.
Important Note: This method is non-standard and primarily targets WebKit browsers. Firefox offers limited styling via the standard `scrollbar-color` and `scrollbar-width` properties (included as comments in the generated code).
Key Features & Controls
Generator Features
- •
Live Preview
See your custom scrollbar styles applied instantly within a scrollable container.
- •
Scoped Styles
The preview styles are scoped and won't affect your site's global scrollbars.
- •
Easy Reset
Quickly revert all settings back to the default style.
- •
Instant CSS Output
Copy the generated CSS rules for WebKit browsers.
Customizable Properties
- •
Scrollbar Size
Control the width (for vertical) or height (for horizontal) scrollbars.
- •
Track Styling
Set the background color and border-radius of the scrollbar track.
- •
Thumb Styling
Customize the background color, border-radius, and border of the draggable thumb.
- •
Thumb Hover State
Define a different background color when hovering over the thumb.
- •
Corner Styling
Optionally style the corner where vertical and horizontal scrollbars meet.
How to Apply the Styles
- Copy CSS: Click the "Copy" button to get the generated CSS rules.
- Target Element: Decide which element's scrollbar you want to style. This could be the entire page (`body` or `html`), or a specific container `div` that has `overflow: auto;` or `overflow: scroll;` and a defined height/max-height.
- Add Class: Add the class `.custom-scrollbar` (or rename it in the CSS if you prefer) to the target element in your HTML.
- Paste CSS: Paste the copied CSS rules into your website's stylesheet.
- Test: Check the appearance in WebKit browsers (Chrome, Safari, Edge). Remember that Firefox will use its default scrollbar or the limited `scrollbar-color`/`scrollbar-width` styles if you uncomment and use them.
Frequently Asked Questions
Will this work in all browsers?
No. The `::-webkit-scrollbar` pseudo-elements are specific to WebKit-based browsers (Chrome, Safari, Edge, Opera). Firefox uses different, standard properties (`scrollbar-width`, `scrollbar-color`) which offer much less customization. Internet Explorer does not support custom scrollbar styling via CSS. Always consider the default scrollbar appearance as a fallback.
Can I style the scrollbar arrows (buttons)?
WebKit provides `::-webkit-scrollbar-button` for styling the up/down/left/right arrows, but styling them consistently is often difficult and they are frequently hidden by default in modern designs. This generator focuses on the more commonly styled track and thumb. You can manually add styles for `::-webkit-scrollbar-button` if needed.
Should I style scrollbars?
It's a design choice. Custom scrollbars can help integrate the UI element with your site's theme. However, users are familiar with their native OS scrollbars, and drastically changing the appearance or usability (e.g., making them too thin or low contrast) can be detrimental to user experience and accessibility. Use custom styles thoughtfully.
How do I apply this only to one specific container?
The generated CSS uses the class `.custom-scrollbar`. Simply add this class only to the specific `div` or element you want to have the custom scrollbar. Make sure that element is actually scrollable (has `overflow: auto` or `overflow: scroll` and content larger than its container).
Comments
No comments yet
Be the first to share your thoughts! Your feedback helps us improve our tools and inspires other users.
More Code Tools
AVRO to JSON Converter
Convert AVRO to JSON
AVRO to Protobuf Converter
Convert AVRO to Protobuf
AVRO to XML Converter
Convert AVRO to XML code
Base64 to JSON Converter
Convert Base64 encode to JSON format
Base64 to XML Converter
Convert Base64 encode to XML format
Base64 to YAML Converter
Convert Base64 encode to YAML format
BBCode to HTML Converter
Convert Bulletin Board code to HTML
BSON to JSON Converter
Convert BSON to JSON
BSON to XML Converter
Convert BSON to XML
Comment Remover
Remove comments from your codebase
CSON to JSON Converter
Convert CSON to JSON
CSS Animation Generator
Create CSS animations visually with presets and controls
CSS Arrow Generator
Create pure CSS arrows (triangles) using borders
CSS Background Generator
Generate pure CSS background patterns with customization
CSS Border Generator
Visually create CSS borders and border-radius styles
CSS Box Shadow Generator
Create adjustable box shadows using CSS
CSS Button Generator
Style buttons in different ways
CSS Checkbox Generator
Generate stylish custom CSS checkboxes with interactive controls
CSS Clip Path Generator
Create custom CSS clip-path shapes visually with presets
CSS Filter Generator
Visually create CSS filter effects like blur, contrast, sepia, etc.
CSS Flexbox Generator
Visually create CSS Flexbox layouts and configure item properties
CSS Glassmorphism Generator
An interactive glassmorphism CSS generator with live element previews
CSS Gradient Generator
Visually create linear and radial CSS gradients
CSS Grid Generator
Interactive CSS Grid Generator with visual previews
CSS Hover Animation Generator
Create interactive CSS hover effects with presets and controls
CSS Loader Generator
Generate pure CSS loading animations with customization
CSS Minifier
Minify CSS code for production
CSS Prettifier
Format and beautify CSS code
CSS Skew Generator
Visually create CSS skew (slant) transformations
CSS Sprite Generator
Combine images into optimized CSS sprites
CSS Stylesheet Generator
Visually build complete CSS rulesets for elements
CSS Text Shadow Generator
Generate CSS text shadow code
CSS Toggle Switch Generator
Browse and generate pure CSS toggle switch styles and animations
CSS Transform Generator
Visually create 2D/3D transforms (translate, rotate, scale, skew)
CSS Triangle Generator
Generate CSS code foor arrows and triangle shapes
Go Struct to JSON Converter
Convert Go Struct to JSON
GraphQL Minifier
Minify GraphQL code for production
HTML Escape
Escape HTML special characters
HTML Minifier
Minify HTML code for production
HTML Prettifier
Format and beautify HTML code
HTML Table Generator
Create HTML table code
HTML to BBCode Converter
Convert HTML to Bulletin Board code
HTML Unescape
Unescape HTML special characters
INI to JSON Converter
Convert INI to JSON
INI to XML Converter
Convert INI to XML
INI Validator
Check INI files for syntax errors
INI to YAML Converter
Convert INI to YAML
JavaScript Minifier
Minify JavaScript code for production
JavaScript Obfuscator
Obfuscate JavaScript code
JavaScript Prettifier
Format and beautify JavaScript code
JavaScript to JSON Converter
Convert JavaScript Objects to JSON
JSON Compare
Check the difference between two JSON files
JSON Escape
Escape JSON content
JSON Formatter
Format and validate JSON data
JSON Minifier
Minify JSON content for production
JSON Prettifier
Format and beautify JSON content
JSON Schema Validator
Validate JSON data against a JSON Schema
JSON to AVRO Converter
Convert JSON to Apache's AVRO format
JSON to Base64 Converter
Convert JSON to Base64 encoding
JSON to BSON Converter
Convert JSON code to binary JSON
JSON to C# Classes Converter
Convert JSON to C# Classes
JSON to Dart Converter
Convert JSON code to Dart
JSON to Go Struct Converter
Convert JSON code to Go Struct
JSON to INI Converter
Convert JSON code to INI format
JSON to JSDOC Converter
Convert JSON code to JSDOC format
JSON to JSON Schema Converter
Convert JSON to a JSON schema
JSON to Kotlin Class Converter
Convert JSON code to Kotlin Data Classes
JSON to Mongoose Schema Converter
Convert JSON to a Mongoose schema
JSON to NDJSON Converter
Convert JSON code to NDJSON format
JSON to Protobuf Converter
Convert JSON to Protobuf
JSON to Query String Converter
Convert JSON to a query string
JSON to Rust Structs Converter
Convert JSON code to Rust Serde Structs
JSON to Swift Structs Converter
Convert JSON code to Swift Structs
JSON to TOML Converter
Convert JSON to TOML
JSON to TypeScript Converter
Convert JSON to TypeScript
JSON to XML Converter
Convert JSON code to XML format
JSON to YAML Converter
Convert JSON code to YAML format
JSON to Zod Schema Converter
Convert JSON code to Zod schema
JSON Unescape
Unescape JSON content
Lua Minifier
Minify Lua code for production
Lua to JSON Converter
Convert Lua code to JSON
Lua to TypeScript Converter
Convert Lua code to TypeScript types and more
PHP Minifier
Minify PHP code for production
Protobuf to JSON Converter
Convert Protobuf to JSON
Protobuf to XML Converter
Convert Protobuf to XML
Protobuf to YAML Converter
Convert Protobuf to YAML
Pixels to REM Converter
Convert Pixels (PX) to REM
Python Minifier
Minify Python code for production
Query String to JSON Converter
Convert Query Strings to JSON format
Regex Generator (AI)
Generate regular expressions with the help of AI
REM to Pixels Converter
Convert REM to Pixels (PX)
SQL Prettifier
Format and beautify SQL queries
TOML to JSON Converter
Convert TOML to JSON
TOML to XML Converter
Convert TOML to XML
TOML to YAML Converter
Convert TOML to YAML
TOML Validator
Check TOML files for syntax errors
TypeScript Formatter
Format and beautify TypeScript files
TypeScript to JSON Schema Converter
Convert TypeScript types to JSON Schema
TypeScript to Lua Converter
Convert TypeScript code to Lua
XML Compare
Find the differences between two XML codebases
XML Formatter
Format and validate XML documents
XML to AVRO Converter
Convert XML code to AVRO format
XML to Base64 Converter
Convert XML code to Base64 encoding
XML to C# Class Converter
Convert XML code to C# Classes
XML to Go Struct Converter
Convert XML code to Go Struct
XML to JSON Converter
Convert XML code to JSON format
XML to Protobuf Converter
Convert XML to Protobuf
XML to TOML Converter
Convert XML code to TOML format
XML to TypeScript Converter
Convert XML code to TypeScript interfaces
XML to XSD Converter
Convert XML code to XSD format
XML to YAML Converter
Convert XML code to YAML format
XML Validator
Check XML documents for well-formedness errors
YAML Formatter
Format and beautify YAML files
YAML to Go Struct Converter
Convert YAML to Go Structs
YAML to INI Converter
Convert YAML code to INI format
YAML to JSON Converter
Convert YAML to JSON format
YAML to TOML Converter
Convert YAML code to TOML format
YAML to XML Converter
Convert YAML to XML format
YAML Validator
Check YAML files for syntax errors