CSS滚动条生成器
通过可视化编辑器自定义CSS滚动条设计。 调整颜色、宽度、圆角，直接复制代码。
/* 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;
}滚动内容 #1 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #2 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #3 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #4 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #5 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #6 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #7 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #8 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #9 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #10 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #11 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #12 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #13 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #14 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #15 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #16 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #17 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #18 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #19 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #20 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #21 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #22 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #23 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #24 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #25 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #26 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #27 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #28 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #29 - 预览您的自定义滚动条。滚动查看效果。
滚动内容 #30 - 预览您的自定义滚动条。滚动查看效果。
使用方法
设置样式
设置滚动条宽度、颜色、圆角等
预览
在实时预览中查看滚动条外观
复制CSS
复制生成的CSS代码
功能特点
实时预览
更改设置时实时预览滚动条效果
跨浏览器支持
自动生成WebKit和Firefox的CSS代码
悬停和激活状态
可分别自定义悬停和拖动状态的样式
FAQ
🔗相关工具
颜色代码转换器
在 HEX、RGB 和 HSL 颜色代码之间转换。 使用取色器和实时预览直观选择颜色。
取色器
使用色轮和滑块直观选择颜色。 获取并复制 HEX、RGB 和 HSL 格式的颜色代码。
图片颜色提取器
自动检测图片中的主色调并生成色板。 还可以点击图片任意位置提取单个颜色。
图片平均色提取器
计算整张图片或选定区域的平均颜色。 适用于配色方案选择或缩略图背景色。
CSS 渐变生成器
通过拖拽控制可视化创建 CSS 渐变。 支持线性、径向和锥形渐变类型，带预设。
CSS 阴影生成器
通过滑块可视化创建 CSS box-shadow。 支持多重阴影和内阴影。