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

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

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

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

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

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

使用教學

STEP 1

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

CSS Background Patterns

STEP 2

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

CSS Background Patterns

STEP 3

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

CSS Background Patterns

STEP 4

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

CSS Background Patterns

值得一試的三個理由:

  1. 免費背景圖產生器,可快速製作純 CSS 語法的背景圖案
  2. 線上調整前景、背景顏色、不透明度和間距等參數
  3. 一鍵快速複製取得 CSS 程式碼
分享本文
×