CSS Scrollbar 樣式產生器

以視覺化方式產生自訂的 CSS 滾動條樣式。你可以調整滾動條寬度、軌道顏色、滑塊顏色、邊框與圓角,並即時預覽效果。相容於 Chrome, Safari, Edge 和 Firefox 瀏覽器。

自訂設定

{{ scrollbarWidth }}px
{{ scrollbarHeight }}px
{{ thumbMinHeight }}px
{{ thumbRadius }}px
{{ trackRadius }}px
{{ shadowBlur }}px
{{ shadowOpacity }}%

滾動條即時預覽

可滾動的預覽內容區

這是一個滾動條的預覽區域。你可以拖拽右側或下方的滾動條來檢視滾動效果。

調整左側面板中的任何參數(例如寬度、邊框及圓角),此區域的滾動條將會即時更新。

本工具同時支援 Chrome 等 Webkit 核心瀏覽器(支援更豐富的樣式,如 Hover/Border/Shadow)以及 Firefox 瀏覽器。

當你對滾動條樣式感到滿意時,可以直接複製右側的 CSS 程式碼並貼入你的專案中。

{{ t('color_item') }} {{ i }}

這是一個滾動條的預覽區域。你可以拖拽右側或下方的滾動條來檢視滾動效果。

調整左側面板中的任何參數(例如寬度、邊框及圓角),此區域的滾動條將會即時更新。

本工具同時支援 Chrome 等 Webkit 核心瀏覽器(支援更豐富的樣式,如 Hover/Border/Shadow)以及 Firefox 瀏覽器。

當你對滾動條樣式感到滿意時,可以直接複製右側的 CSS 程式碼並貼入你的專案中。

注意:邊框、圓角、陰影和 Hover 懸停效果主要在 Chrome/Safari/Edge 瀏覽器中生效;Firefox 由於標準限制,僅支援寬度與主色調設定。

{{ t('css_code_output') }}