免費線上 CSS 設計工具

CSS 與視覺設計工具：顏色轉換、漸層產生器、Box Shadow、Border Radius、Flexbox、CSS Grid、QR Code。

顏色轉換器漸層產生器陰影產生器 QR Code 產生器 Border Radius 產生器 Flexbox 排版產生器 CSS Grid 產生器 CSS Text Shadow 產生器

關於設計工具

設計工具集面向前端工程師、UI 設計師、行銷視覺製作。CSS 漸層產生器即時預覽 linear / radial / conic gradient 並輸出可貼用的 CSS 程式碼；色票調色盤從 HSL 自動產生互補色、類比色、三等分色，搭配 WCAG 對比度檢查避免文字看不清楚；box-shadow 視覺化編輯器拖拉就調 offset、blur、spread、color，告別猜數字；border-radius 工具支援 8 個獨立角度（左上左下右上右下 × 水平垂直）；CSS clip-path、cubic-bezier easing、字型配對都收錄。設計稿落地到 production code 中間的所有手動翻譯動作都被砍掉。

常見問題

CSS gradient 為什麼在 Safari 顯示異常？

Safari 對某些 gradient 語法（例如 conic-gradient、實驗性 color-mix()）需要 -webkit- 前綴或使用較新版 Safari 才支援。我們的 gradient 工具會偵測語法相容性並提示需要的 prefix。常見坑：iOS Safari 對 background gradient 不會被 background-clip:text 完整支援，需用 -webkit-background-clip:text。

色票配色怎麼挑才不違和？

三個原則：(1) 60-30-10 比例 — 主色 60%、次色 30%、強調色 10%；(2) 用 HSL 而非 RGB 思考，固定 H 改 S、L 容易；(3) 對比度 ≥ 4.5:1（一般文字）或 3:1（大文字）符合 WCAG AA。我們的 palette 工具自動標 contrast 等級，看到紅色 X 立刻知道要調。

box-shadow 跟 filter:drop-shadow() 有差嗎？

有。box-shadow 跟著元素的盒子模型（rectangular box）；drop-shadow 跟著實際渲染形狀（含透明 PNG、SVG、border-radius、clip-path）。要透明 PNG 投陰影必用 drop-shadow；單純圓角矩形 shadow 用 box-shadow 效能更好（不觸發 filter pipeline）。

border-radius 6 個值跟 8 個值有什麼差？

短語法 4-value 是四角；8-value 用 / 分隔水平半徑與垂直半徑，能做橢圓角而非圓角。例：border-radius:50% 50% 0 0 / 100% 100% 0 0 = 上半圓。視覺工具能即時預覽，不用 mental gymnastics。

圖片設計用 PNG、WebP、SVG 怎麼選？

圖示、Logo（向量化可表達）→ SVG（無限縮放、檔案小、可改色）。產品照、實景 → WebP（檔案比 JPEG 小 25-35%）+ PNG fallback for legacy。半透明 UI 元素 → PNG-24 或 WebP；不要用 JPG（無透明）。動畫 → WebP 或 APNG，避免 GIF（檔案大色階差）。

分享此工具： Facebook LINE X