CSS／Frontend 工具 | Tooloo

所有工具

顏色

線上取色用色盤挑選顏色，同時取得 HEX、RGB、HSL 與對比度。

CSS 漸層產生產生 linear、radial 與 conic 漸層，即時預覽並複製 CSS。

視覺效果

CSS Box Shadow 產生調整偏移、模糊、擴散與顏色，疊出多層陰影並複製 CSS。

CSS 圓角產生分別調整四個圓角，支援橢圓角並輸出 border-radius。

CSS Filter 產生調整模糊、亮度、對比、飽和度等濾鏡並即時比對效果。

CSS 動畫產生選擇動畫效果並調整時間與次數，輸出 keyframes 與 animation。

版面配置

Flexbox 版面產生調整 flex 容器屬性並即時看見項目排列變化。

CSS Grid 版面產生設定欄列數、間距與對齊，即時預覽並輸出 grid CSS。

尺寸換算

CSS clamp() 流體尺寸計算由最小值、最大值與視窗範圍算出 clamp() 流體字級。

PX 轉 REM 換算把像素值換算成 rem，可自訂根字級並附常用對照表。

REM 轉 PX 換算把 rem 值換算成實際像素，並列出常用 rem 對照表。

PX 轉 VW／VH 換算依設計稿的視窗尺寸，把像素換算成 vw 與 vh。

長寬比計算由寬高算出最簡比例，或由比例推算缺少的一邊。

SVG

SVG 預覽貼上 SVG 立即安全預覽，並看見被移除的危險內容。

SVG 最佳化壓縮工具移除多餘內容與過長小數，縮小 SVG 體積並比對前後結果。

為什麼把每個工具分成獨立頁面

調陰影和寫 Grid 是兩件完全不同的事，使用者不會在同一個任務裡來回切換，搜尋時打的字也不一樣。因此每個工具都有自己的網址、自己的說明與自己的常見問題，而不是塞進同一個頁面用分頁切換。顏色格式互轉屬於文字轉換而非視覺調整，因此沿用 Developer Tools 既有的顏色轉換器，不另外重複建頁。

相關工具

顏色轉換器（HEX／RGB／HSL） ↗CSS Formatter ↗CSS Minifier ↗HTML Formatter ↗Base64 編碼／解碼 ↗