Hero Patterns 免費 SVG 無縫背景圖產生器，線上製作客製化的網頁背景素材

當在進行網頁設計時，設計師經常需要根據網站的風格來調整網頁背景，因此網頁背景圖片就成了一個需要靈感的難題，如果案主本身有提供素材的話倒還好，若是沒有的話網頁設計師就會需要自己設計或是去尋找相關的背景素材，其中 SVG 平鋪式背景是一種能夠維持網頁設計美感與網站速度的熱門選項。

如果讀者們還有印象的話，本站之前就有介紹過像是 Patterninja、SVG Stripe Generator 等不同風格的線上 SVG 背景圖片產生器，由於 SVG 向量圖的檔案相當輕巧，並且具備放大不會失真的特性，所以相當適合用來做為網頁的背景，而今天站長還打算要再推薦一個免費的 SVG 無縫背景圖產生器 Hero Patterns 給讀者們。

Hero Patterns 是一個線上 SVG 網頁背景圖產生器，可以快速產生並下載各種漂亮的 SVG 無縫背景圖片，同時 Hero Patterns 還允許使用者自訂 SVG 圖案的前景、背景顏色與透明度，當背景素材設計完後，網頁設計師甚至能夠直接複製 Hero Patterns 所提供的 CSS 程式碼來貼到網站上產生背景效果，而無須再另外下載 SVG 檔案。

Hero Patterns 使用教學

STEP 1

開啟 Hero Patterns 網站後，使用者可以在首頁上看到許多無縫圖案的平鋪式網頁背景圖，而在網頁上方則能夠統一調整這些背景圖的前景、背景顏色和透明度。

Foreground color：前景顏色
Background color：背景顏色
Foreground Opacity：透明度

STEP 2

再來使用者可以在網頁下方的列表裡選擇想要的 SVG 網頁背景圖樣式，目前 Hero Patterns 網站上總共收錄了超過 80 種以上的無縫背景圖案，並且仍在持續不斷地更新，相信能夠適合各種類型的網站使用。

STEP 3

點選想要使用的 SVG 背景圖樣後，使用者還可以在 Selected Pattern 的介面上針對該圖案重新進行前景、背景顏色與透明度的調整，網頁上則會直接顯示調整後的背景圖案效果，而如果想要重新設計也可以點擊下方的 Reset 按鈕來重置所有設定。

STEP 4

當圖案外觀設計完成後，使用者就可以直接複製視窗上方產生的 CSS 程式碼，而網頁設計師只要將 CSS 程式碼貼到網站裡就能夠快速套用 SVG 背景圖案，相當的方便！

STEP 5

如果不想使用 CSS 程式碼，Hero Patterns 也有提供 SVG 圖片格式可以下載，使用者只要點擊右上角的 Download unstyled SVG 選項就能夠下載到 SVG 的背景圖片。