免費線上設計工具

漸層、配色、版面、SVG、提詞、拼豆圖紙……設計師與前端的高頻小工具，打開即用，無需註冊。

視覺化產生 linear / radial 漸層 CSS，即時預覽

依 WCAG 公式計算文字與背景對比度，AA / AAA 判定

視覺化設定 Flexbox / Grid 屬性，即時示範並產生 CSS

對 path d 套用平移 / 縮放 / 旋轉，即時預覽並輸出 SVG

校驗、預覽並最佳化 SVG 原始碼，統計尺寸與體積

全螢幕等速捲動提詞，支援鏡像與調速，錄影必備

照片轉拼豆圖紙，依 Artkal / MARD / Perler 色號量化配色並統計用量

為什麼用這裡的設計工具？

漸層計算、對比檢查、SVG 解析與提詞捲動全部在瀏覽器內完成，設計內容不上傳任何伺服器。

參數與結果雙向連動，調整色標、版面屬性或變換參數時，預覽與程式碼即時更新，可直接複製使用。

對比依 WCAG 相對亮度公式計算，漸層與版面輸出標準 CSS，SVG 通過嚴格 XML 驗證，貼上即用。

這些設計工具是免費的嗎？

是的，全部工具永久免費、無需註冊、沒有次數限制，網站透過展示廣告維持營運。

我的設計或文稿會被上傳嗎？

不會。漸層產生、對比計算、SVG 解析與提詞捲動都由 JavaScript 在你的瀏覽器本機完成，內容不經過伺服器。

產生的 CSS / SVG 可以直接用於專案嗎？

可以。輸出均為標準語法：漸層與版面是合法的 CSS 宣告，SVG 經過 XML 驗證並保留命名空間，可直接貼到樣式表、內嵌樣式或圖示檔案。

設計工具全部在瀏覽器本機執行。