CSS 背景圖案產生器
使用純 CSS 產生背景圖案。 透過視覺化編輯器自訂條紋、圓點、格子等多種圖案。
background: repeating-linear-gradient( 0deg, #ffffff, #ffffff 20px, #3b82f6ff 20px, #3b82f6ff 40px );
分享此工具
📖
使用方法
Step 1
選擇圖案
選擇圖案：條紋、圓點、格子等
→
Step 2
自訂設定
使用滑桿調整顏色、大小、角度等
→
Step 3
複製 CSS
複製產生的 CSS 程式碼
✨
功能特色
即時預覽
調整參數時即時預覽圖案效果
豐富圖案
多種圖案範本：條紋、圓點、格子、鋸齒等
無需圖片
僅使用 CSS 漸層產生，效能優異
❓
FAQ
使用 CSS linear-gradient、radial-gradient 等而非圖片建立的背景圖案。
🔗相關工具
🎨
設計工具色碼換算工具
在 HEX、RGB 和 HSL 色碼之間互換。 使用顏色選擇器和即時預覽直觀選色。
🎨
設計工具色彩選擇器
使用色輪和滑桿直覺地選取顏色。 取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。
🎨
設計工具圖片色彩擷取器
自動偵測圖片中的主要色彩並生成色彩調色盤。 也可以點擊圖片上的任意位置來取得個別色彩。
🎯
設計工具圖片平均色彩擷取器
計算整張圖片或選定區域的平均色彩。 適合用於選擇配色方案或縮圖背景顏色。
🌈
設計工具CSS 漸層產生器
使用拖動控制視覺化建立 CSS 漸層。 支援線性、放射狀和圓錐漸層類型及預設。
🔲
設計工具CSS 陰影產生器
使用滑桿視覺化建立 CSS box-shadow。 支援多重陰影和內陰影。