CSS Background Patterns – 21+ 免費線上背景 CSS 樣式，可即時預覽與設定顏色間距及透明度並一鍵複製

今天介紹的 CSS Background Patterns 是由 MagicPattern 所提供的一個線上項目，目前在該頁面中，已經提供了 21 種不同的背景樣式，所有的背景都可以線上即時預覽顯示，並且能夠一鍵複製該樣式的 CSS 樣式，直接使用在自己的專案中。

這個項目和之前我所介紹的 CSS box-shadow 很相似，一個是利用「box-shadow」來呈現背景陰影的效果，而 CSS Background Patterns 則是利用 CSS 中的「background-color」來展現不同的背景樣式。

如果你想要了解其他更多有關 CSS 相關的線上免費資源，可以參考：

• CSS box-shadow examples by CSS Scan – 免費提供 82 種 Box-shadow CSS 陰影樣式，隨點擊複製使用 CSS 程式碼
• 3D Book Image CSS Generator – 免費線上建立 3D 書本展示效果，可設定圖片與連結並產生 CSS 與 HTML 程式碼
• 如何在 WordPress 中自定義滾動條？兩個方法教你快速設定！

網站名稱：CSS Background Patterns by MagicPattern
網站網址：https://www.magicpattern.design/tools/css-backgrounds

CSS Background Patterns 簡介教學

Step 1

進入頁面後，你可以在下方瀏覽各種 CSS 樣式，你可以點選每個 CSS 樣式的右上角「Preview pattern」按鈕，就可以立即套用到目前頁面的背景，讓你能夠看到實際的效果：

Pin

Step 2

套用效果之後，你還可以透過上方的自定義功能，來調整背景的顯示樣式，你可以透過改變「Back Color」來改變背景顏色，透過「Front Color」來改變前景顏色，透過「Opacity」來改變透明度，最右邊的按鈕則可以關閉背景預覽模式：

Pin

Step 3

如果有你想要的 CSS 樣式，就可以點選右上角左邊的「Copy CSS code」按鈕，就能夠一鍵複製該 CSS 樣式的程式碼，如果你有在上方調整過顏色、透明度或間距，它也會直接應用在所有的樣式設定當中：

Pin

Step 4

如果你自己本身有很特別的 CSS 背景樣式想要分享，那麼也能透過點選上方的「Submit your own CSS pattern」按鈕，開啟郵件將你的想法分享給作者，他們就有可能會將你的 Idea 加入到這個網站當中，展現更多不同的背景樣式：

Pin

Pin

CSS Background Patterns 評價推薦心得

• 即時預覽背景效果
• 客製化背景的顏色、間距與透明度
• 一鍵複製 CSS 程式碼