今天介紹的 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」按鈕,就可以立即套用到目前頁面的背景,讓你能夠看到實際的效果:

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 評價推薦心得
- 即時預覽背景效果
- 客製化背景的顏色、間距與透明度
- 一鍵複製 CSS 程式碼
你可能有興趣
- Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
- CSS box-shadow examples by CSS Scan – 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼
- Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀
- Adobe Photoshop Express – 免費線上圖片編輯服務,提供圖片裁切、調整大小、修飾與套用濾鏡效果
- Wunderstock – 超過 1 千萬 CC0 免費圖片,提供壓縮後圖片與免費線上圖片編輯工具
- Diff Checker Text – 免費線上檢查文字或檔案不同之處,可支援文字、圖片、PDF 檔案、Excel 檔案多種格式
- Logaster – 免費 Logo 線上產生器,一秒建立網站 Logo 與 Favicon 打造獨特品牌 Logo 圖示
- OFFF.to – 無須註冊免費縮短網址服務,可直接在網址列當中縮短網址並獲得分析數據
- Speedcheck – 免費線上測速工具,快速測量網路上傳/下載速度與延遲的真實數據
- YoutubeDLD – 一鍵免費下載 Youtube 影片,在網址加上 DLD 即可 Download
- Internxt Drive – 替代 Google Drive 免費 2 GB 雲端空間服務,採用加密與分佈式技術保護你的網路資料
- Screenity – 強大且免費的開源教學影片錄製工具,能錄製螢幕畫面與輸入文字動畫的 Chrome 擴充功能
如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!
發佈留言