設計

免費線上設計工具集合,提供荧幕取色器、RGB/HEX顏色轉換、二維碼生成、圖片壓縮、配色方案生成、漸變生成、字體預覽等多種設計輔助工具,無需安裝設計軟體,瀏覽器直接使用,助力設計師和創意工作者提升設計效率。

圖標
🎨
Favicon生成器
在線Favicon圖標生成器,支援圖片上傳和文字/emoji兩種模式,一鍵生成多尺寸圖標並打包下載
特效
✨
文字特效產生器
選擇描邊、霓虹、立體或漸層特效,調整顏色字級,即時預覽並複製 CSS 程式碼。
SVG
🔷
SVG 圖形產生器
選擇矩形、圓、線、多邊形、路徑或文字,調整填色描邊與座標,即時預覽並匯出 SVG 檔案。
形狀
🔺
CSS 形狀產生器
三角形、菱形、六邊形、星形、氣泡與斜角六種 clip-path 形狀,調整顏色與變形參數並複製程式碼。
佔位
🧩
佔位圖產生器
輸入寬高、背景色與文字,本機畫布產生指定尺寸佔位圖,一鍵下載 PNG。
圖案
▦
CSS 背景圖案產生器
橫條紋、直條紋、斜紋、點陣與網格五種圖案,調整顏色與密度,即時預覽並複製 CSS 程式碼。
色板
🎭
配色方案產生器
以基礎色為基準,依色相環角度推算補色、近似、三角、四角四種和諧配色。
網格
📐
柵格寬度計算器
輸入容器寬度、列數、列間距與外邊距,自動計算每一列與各跨度寬度表。
漸變
🌈
漸層產生器
視覺化編輯多色標漸層,依角度與位置產生標準 CSS linear-gradient 代碼。
字體
🔤
字型搭配推薦
內建中英文字型組合推薦庫,依襯線/無襯線/手寫/等寬分類瀏覽並複製字型堆疊。
陰影
🌫️
陰影產生器
視覺化編輯多層 box-shadow,調整偏移、模糊、擴展與顏色,一鍵產生 CSS 代碼。
封面
🖼️
封面圖產生器
選擇畫幅比例與漸層配色,輸入標題副標題,一鍵產生封面圖並下載 PNG。
對比度
🔍
對比度檢測
依 WCAG 標準計算前景與背景的對比率,並給出 AA / AAA 可讀性評級。
按鈕
🔘
按鈕產生器
調整顏色、圓角、漸層、邊框與文字,即時預覽並產生按鈕 CSS 代碼。
貝茲
〰️
緩動曲線除錯器
在畫布上拖曳兩個控制點,即時檢視 cubic-bezier 軌跡與動畫預覽,一鍵複製 CSS 程式碼。
畫幅
📐
寬高比計算器
輸入像素尺寸自動化簡寬高比,也可依已知比例與一邊長度反推另一邊,常用比例一鍵速選。
動畫
🎞️
CSS 動畫產生器
拖動滑桿調整位移、旋轉、縮放與透明度,即時預覽並產生標準 CSS 關鍵影格程式碼。
⏫︎