what this does
將自己的圖片變成重複磁磚。
Pattern Generator 可從 16 種幾何預設 — 或您上傳的圖片 — 建立背景。使用材質色票、品牌標誌、照片裁切，或任何 PNG、JPEG、WebP、SVG 檔案作為重複磁磚。
工具完全在瀏覽器執行。選擇檔案，調整背景色、磁磚縮放與不透明度，然後複製 CSS 或下載 SVG 或 PNG。無需帳號，也無需上傳至伺服器。
step-by-step
五步驟上傳並匯出。
- 開啟 Pattern Generator。
- 在圖案選擇器中，點擊 Your image 卡片 — 網格最前面的上傳磁磚。
- 從裝置選擇 PNG、JPEG、WebP 或 SVG 檔案。圖片載入後預覽會更新。
- 調整 Background colour、Scale 與 Opacity，直到預覽中的重複效果符合需求。
- 點擊 Copy CSS、Download SVG 或 Download PNG，在專案中使用圖案。
your file
圖片會發生什麼。
Pattern Generator 將圖片裁切為中央正方形 — 取檔案中央，以較短邊為裁切尺寸 — 再將該正方形縮放至目前縮放設定的磁磚尺寸（最大 256 px）。
所有處理都在裝置記憶體中完成。原始檔案不會上傳至 Tiny Design Shop 或任何第三方伺服器。
transparent pngs
透明 PNG 與背景色。
若圖片有透明度 — PNG、含 alpha 的 WebP 或 SVG — Pattern Generator 會在繪製圖片前，以您選擇的 Background colour 填滿磁磚。圖片的不透明區域保持可見；透明像素會透出背景色。
可用來控制標誌之間的間隙色、柔化裁切材質的邊緣，或在來源檔沒有背景時配合品牌表面色。
export
複製 CSS、SVG 或 PNG。
Copy CSS 提供可貼上的 background-color、background-image 與 background-size 區塊，磁磚以 data URI 嵌入。貼到應顯示重複效果的元素樣式表或內嵌樣式中。
Download SVG 將磁磚匯出為獨立向量檔 — 適合 Figma 填色或設計交接。Download PNG 匯出平鋪預覽的 1600×900 點陣圖 — 適合簡報、社群預覽或不接受 data URI 背景的工具。
細節豐富的自訂圖片會產生較長的 CSS 片段。若工具警告 CSS 過大，建議改用 Download PNG，或將磁磚作為獨立圖片檔託管，而非內嵌 data URI。
limits
檔案大小、磁磚大小與工作階段記憶體。
上傳限制為 8 MB。接受 PNG、JPEG、WebP 與 SVG。磁磚在最大縮放下長邊上限為 256 px — 足以獲得清晰的 CSS 重複，又不會讓樣式表過大。
自訂圖片僅存在於此瀏覽器分頁。重新整理或關閉分頁會清除上傳 — 需重新選擇檔案。沒有雲端儲存或跨裝置同步。
privacy
檔案不會離開您的裝置。
Pattern Generator 在瀏覽器本地處理上傳。裁切、縮放、預覽與匯出都在您的電腦上執行 — 不會傳送至 Tiny Design Shop 伺服器。完成後關閉分頁即可；不會保留圖片副本。