CSS Background Patterns 免費背景圖產生器，可建立純 CSS 背景素材

想想後來的網頁比較少有背景圖需求，多半都是以單色為主，如果覺得略顯單調，也能使用紋理材質或漸層色做為背景，例如 Paper-co 就有許多日系的紙張紋理材質可用做背景，不僅看起來可以提升質感，也不會影響閱讀造成負擔，另一個之前推薦過的 Subtle Patterns 也有超過 500 種紋理素材可供下載；若喜歡重複背景圖 Hero Patterns 可以在不下載任何檔案情況下產生好看的平鋪式背景圖，或是使用 ColorSpark、Gradient Backgrounds 製作漸層色背景，需要背景圖的朋友可以試試看這些服務。

本文要介紹的「CSS Background Patterns」是一個免費背景圖產生工具，可以製作漂亮純 CSS 背景素材，網站已提供一些基本圖形設計，使用者只要選取後就能立即套用到背景預覽，除此之外，還能自訂背景、前景色、不透明和間距數值，即時呈現在網站上，對於想要一些簡單構圖背景、又不想造成閱讀干擾來說是很有用的線上產生器。

使用者可快速複製 CSS Background Patterns 產生的圖片背景 CSS 語法，丟進網站樣式表就能套用，完全不用下載或託管圖片檔案，也能讓網頁維持在最精簡狀態，避免因為載入圖片而造成延遲問題。

CSS Background Patterns
https://www.magicpattern.design/tools/css-backgrounds

使用教學

STEP 1

開啟 CSS Background Patterns 網站後往下捲動就能看到網站提供的背景圖案。

STEP 2

點選圖案右上角的「Preview Pattern」將圖案套用到背景即時預覽效果。

STEP 3

上方有一排編輯器功能可以調整調整背景顏色、前景顏色、不透明度和間距，CSS Background Patterns 特色是在設定後會立即反映在網站上，就不用逐一下載或重新整理，非常方便。

STEP 4

設定後進行預覽，沒問題的話點選圖片右上角「Copy CSS Code」就能快速複製 CSS 原始碼，將它使用到你網站的樣式表即可立即套用。