跳到主要內容
Toolars
探索

設計 / 視覺系統實驗臺

設計

透過即時預覽建立 CSS 與配色系統，並複製可用程式碼。

由間距標尺、顏色樣本、貝茲曲線條和陰影樣本組成的模組化設計規範臺

設計

17 款核心工具：透過即時預覽建立 CSS 與配色系統，並複製可用結果。

顯示 17 / 17 款工具

CSS 載入動畫產生器

CSS Loader Generator

視覺化設計軌道圓環或三點載入動畫，調整尺寸、速度與配色，複製含 @keyframes 與減少動效媒體查詢的 CSS。

建立

CSS 核取方塊產生器

CSS Checkbox Generator

設計 18–64 px 自訂核取方塊並預覽勾選動畫，匯出保留原生 input、含 :focus-visible 與 :disabled 樣式的 CSS。

建立

CSS 開關產生器

CSS Switch Generator

調整軌道與滑鈕尺寸並為開關兩態配色，匯出純 CSS 切換開關；標記保留可聚焦的原生 input，無需 JavaScript。

建立

CSS clip-path 產生器

CSS Clip Path Generator

拖曳、使用鍵盤或輸入座標編輯多邊形。從四種預設開始，在本機複製 clip-path 宣告或完整 CSS。

建立

CSS 背景圖案產生器

CSS Background Pattern Generator

純以 CSS 漸層組合圓點、網格或斜紋平鋪背景，不需任何圖片檔案，匯出僅三條宣告的規則，各種解析度都銳利。

建立

CSS 緩動曲線產生器

CSS Cubic Bezier Generator

拖動兩個控制點設計緩動曲線，Y 值越界即產生回彈，預覽按真實節奏循環，複製含時長的 cubic-bezier() 規則。

建立

CSS 玻璃擬態產生器

CSS Glassmorphism Generator

在彩色背景上調整不透明度、模糊、飽和度與邊框，搭建磨砂玻璃面板，匯出含 -webkit-backdrop-filter 的分層 CSS。

建立

CSS 文字故障效果產生器

CSS Text Glitch Effect Generator

以青紅雙通道偏移製作文字故障效果，調整偏移量與循環時長，匯出需配 data-text 屬性、含減少動效處理的 CSS。

建立

CSS 漸層產生器

CSS Gradient Generator

組合線性或放射漸層，設定方向角度、兩種顏色與停止點位置，預覽隨每次調整即時更新，複製單條 background 宣告。

建立

CSS 三角形產生器

CSS Triangle Generator

選擇方向、設定底邊與高度、挑選填色，產生任意尺寸的純 CSS 等腰三角形，複製可直接貼入樣式表的邊框規則。

建立

CSS 陰影產生器

CSS Box Shadow Generator

視覺化調整偏移、模糊、擴散、不透明度與 inset 內陰影，預覽隨滑桿即時重繪，複製精確的 box-shadow 宣告。

建立

CSS 圓角產生器

CSS Border Radius Generator

以像素或百分比分別塑造四個圓角，可連動統一或各自獨立，複製按順時針寫全四值的 border-radius 宣告。

建立

配色方案產生器

Color Harmony Builder

輸入種子色，依類似、互補、分裂互補、三色、四色或單色規則產生五色配色，逐色標註對比度，可複製 CSS 或下載 JSON。

建立

HEX 轉 RGBA

HEX to RGBA Converter

解析 #RGB、#RGBA、#RRGGBB、#RRGGBBAA 四種格式，精確換算 alpha 為小數，逐通道核對後複製 rgba() 結果。

轉換

RGBA 轉 HEX

RGBA to HEX Converter

把 rgb() 或 rgba() 轉為大寫十六進位，alpha 小於 1 時保留為兩位位元組，拒絕百分比通道，可複製或下載。

轉換

色階產生器

Color Shades Generator

圍繞基礎色產生 3–20 級明暗色階，基礎色固定居中、兩端避開純黑純白，匯出帶穩定編號的 CSS 自訂屬性。

建立

混色器

Color Mixer

在 sRGB 空間按權重或覆蓋方式混合兩個顏色，支援半透明輸入，結果同時給出 HEX、RGBA 與 CSS 宣告，可下載 JSON。

編輯

設計流程 / 把視覺判斷轉換為可重用規則。

調整系統，並讓每項輸出保持明確。

設定幾何規則

用可衡量的數值控制間距、圓角、圖案與形狀。

開啟對應工具

帶走可用程式碼

直接複製產生的 CSS 與權杖，不必重建設計。

開啟對應工具

為專注工作而建 / 無需設定，也能得到可用結果。

從設計上瀏覽器優先。

瀏覽器優先

開啟任務即可使用，無需安裝工具套件或註冊帳戶。

處理過程可見

每一步都能看到輸入、結果、狀態和執行方式。

隨時可以匯出

直接複製或下載可用結果，無需再次整理。

相關分類

從另一個專注分類繼續目前工作流程。

寫作

直接在瀏覽器中起草、檢查和轉換文字。

圖像工作室

在本機編輯像素、檢查圖像並匯出可靠的視覺素材。

開發者工具

格式化、編碼、驗證並檢查推動開發工作的各類內容。

社群媒體樣機

製作帶有明確樣機標示的社群媒體預覽與發布素材。

瀏覽器擴充功能 / 瀏覽器入口

讓設計離瀏覽器快捷入口更近一步。

在網頁目錄中使用這個分類，也可在 Chrome 側邊欄中延續同樣專注、私密的工作流程。

Chrome 擴充功能

系統設計說明

讓每個視覺選擇都能重現。

使用明確約束

從間距、比例或幾何規則出發，而不是任意數值。

結合情境檢查對比度

在真實背景和字級上判斷顏色，而不是孤立看色塊。

閱讀產生的 CSS

進入正式環境前確認屬性值和瀏覽器支援情況。

開始前還有疑問？

這個頁面中的哪些工具在本機執行？
目前列出的工具都在瀏覽器中處理輸入，不會上傳輸入內容。未來如增加雲端或混合處理，會在使用前明確說明。
轉換過程會修改來源檔案嗎？
Toolars 始終處理獨立的瀏覽器副本。除非你主動下載並替換原始檔案，否則來源檔案或原文不會改變。
可以收藏工具嗎？
可以。請先登入，Toolars 會把收藏儲存到你的帳戶，並在登入後返回該工具。
如何回報錯誤結果？
每個工具頁都有回報入口。提交內容只包含你主動傳送的訊息和頁面脈絡。

這個分類還缺少一款工具？

告訴我們輸入內容、轉換過程和預期結果。

申請工具