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

2 分鐘閱讀

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

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

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

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

導覽

CSS Background Patterns 簡介教學

Step 1

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

Step 2

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

Step 3

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

Step 4

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

CSS Background Patterns 評價推薦心得