CSS 背景圖案產生器

📖 工具介紹

CSS 背景圖案產生器是一款協助開發者與設計師用純 CSS 快速拼出無縫重複背景的免費線上工具。比起找一張平鋪圖片再壓縮上傳，用漸層函式畫圖案更輕量、更清晰、也更容易改色。本工具提供橫條紋、直條紋、45 度斜紋、點陣與網格五種最常用的背景紋樣，你只要選擇類型，再調整背景底色、圖案顏色、圖案重複尺寸與線條或圓點粗細，右側預覽區就會立即鋪滿整塊面板，下方同步產生可以直接貼上的 CSS background 程式碼。橫直條紋與斜紋使用 repeating-linear-gradient 硬停漸層，點陣使用 radial-gradient 圓形漸層，網格則把兩個方向的線框疊加在一起。所有圖案都不需要任何圖片資源，載入快、可無限放大且顏色隨時可改。工具全程在瀏覽器本機拼裝樣式字串並套用，不發出網路要求，介面支援簡中、繁中與英文三語，手機電腦均可使用。

✨ 功能特點

• 五種常用紋樣：橫條紋、直條紋、斜紋、點陣、網格一鍵切換
• 顏色自由搭配：背景底色與圖案顏色各自取色，對比即時可見
• 尺寸與粗細可調：重複間距和線寬或圓點大小平滑拖動
• 純 CSS 實作：使用漸層函式繪製，零圖片、載入快、可無損縮放
• 即時預覽：任何調整都立即鋪滿預覽面板，所見即所得
• 一鍵複製程式碼：產生帶 background-color 與 background-image 的完整規則

📝 使用方式

1. 在頂部選擇你需要的圖案類型按鈕
2. 用取色器設定背景底色與圖案顏色
3. 拖動圖案尺寸滑桿控制重複間距，拖動粗細控制線寬或圓點大小
4. 觀察右側預覽面板，確認紋樣密度與配色符合預期
5. 點擊複製程式碼，把規則貼到專案樣式表中即可使用

⚠️ 注意事項

• 尺寸含義：圖案尺寸是一個重複單元的邊長，越小越密集
• 粗細含義：條紋時為線寬，點陣時為圓點半徑，網格時為線框寬度
• 對比建議：底色與圖案色對比過低會看不清紋樣，建議拉開明暗差
• 純 CSS 優勢：不產生圖片要求，換色只需改兩個色值
• 本機產生：所有樣式字串都在瀏覽器拼裝，不產生網路要求