圖案產生器
依系列瀏覽
關於 圖案產生器
圖案產生器能把近 2000 種現成設計變成可以調整、隨即使用的背景。您可以瀏覽 14 個系列,從波浪、波點和鑲嵌,到蘇格蘭格紋、日本青海波、伊斯蘭星形、裝飾藝術扇形、像素精靈和迷彩,並用自己的顏色查看每一種。
每個設計都以向量圖形繪製,在任何縮放比例和任何角度下都能無可見接縫地重複。您可以修改最多六種顏色,以及縮放、位置、間距、線條粗細和角度,把填色的形狀變成外框,或者用循環動畫讓圖案動起來。地形圖、沃羅諾伊單元和特呂謝圖塊等生成式圖案,每次點擊都能產生新的變化。
滿意之後,可以將它複製為 CSS、SCSS、Tailwind 設定、內嵌 SVG、資料 URI 或 React 元件,也可以下載任意尺寸(最大 8000 像素)的 SVG、PNG、JPG 或 WebP,還可以匯出單一圖塊,用於您自己的重複排列。所有操作都在瀏覽器中執行:不會上傳任何內容,也不需要帳號。
如何使用 圖案產生器
- 選擇圖案:依名稱搜尋,或依系列和顏色數量篩選。
- 用色彩選擇器、現成調色盤或「新調色盤」選擇顏色。
- 調整縮放、位置、間距、線條粗細和角度。按下「給我靈感」之前,先鎖定想保留的數值。
- 用「顯示圖塊」「在頁面上」和「在文字中」預覽進行檢查。
- 複製程式碼或下載檔案,並用「複製連結」日後回到這個確切的圖案。
常見問題
是的。此工具免費,無需註冊,也沒有使用限制:每個圖案都在您的瀏覽器中繪製,不會有檔案傳送到伺服器。
可以。您匯出的圖案可用於個人和商業作品,例如網站、應用程式、包裝和印刷品,無需標示出處。
不會。每個越過圖塊邊緣的形狀都會在對側再繪製一次,因此重複是無縫的。使用「顯示圖塊」預覽,可以準確看到一個圖塊從哪裡開始、到哪裡結束。
CSS 最簡單:把規則貼到樣式表中,並套用到任意元素即可。在 0、90、180 或 270 度時,它使用搭配 background-size 的一個小圖塊;在其他角度時,它使用填滿元素的 SVG。Tailwind、SCSS、React 和資料 URI 版本包含相同的圖案。
動畫內建於 SVG 中,因此不需要指令碼,在現代瀏覽器中也可作為 CSS 背景運作。請在您需要支援的瀏覽器中檢查。PNG、JPG 和 WebP 檔案仍是靜態圖片,因此只保留第一個影格。
迷彩和地形圖等有機設計包含大量曲線。程式碼大小顯示在複製按鈕旁邊。如果它對頁面來說太重,請選擇圖塊更小的設計,或改用 PNG 圖塊。
可以,幾乎所有圖案都支援:開啟「透明背景」,然後匯出為 CSS、SVG、PNG 或 WebP。少數重疊設計以背景色遮蓋形狀,因此需要純色背景。JPG 檔案不支援透明。
熱門搜尋
svg 圖案產生器
無縫圖案產生器
css 背景圖案
重複圖案製作
免費背景圖案
幾何圖案產生器
tailwind 背景圖案
無縫圖塊 png
需要協助?
使用此工具時遇到問題?請告訴我們的團隊。