設計 / CSS
CSS圖樣產生器（條紋、圓點、網格、棋盤格）
只使用CSS漸層建立重複背景圖樣：條紋、對角線條紋、網格線、圓點、棋盤格和鋸齒，還能自訂兩種顏色、尺寸與線條寬度，並複製CSS。
CSS圖樣產生器（條紋、圓點、網格、棋盤格）: 每種圖樣都是一個或兩個依所選尺寸重複的CSS漸層：條紋使用repeating-linear-gradient，網格使用兩個交叉的linear-gradient，圓點使用radial-gradient，棋盤格使用repeating-conic-gradient。不需要圖片檔案，因此圖樣在任何縮放比例下都能保持銳利，載入也完全不會增加成本。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。
- 分類
- 開發者工具
- 使用次數
- 在瀏覽器中
- 費用
- 免費・免註冊
- 可用狀態
- 可立即使用
全程在瀏覽器中執行
CSS
.pattern {
background-color: #f2faed;
background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}每個圖樣都只使用CSS漸層繪製，因此不需要下載圖片，在任何縮放比例下都能保持清晰，也能在樣式表中變更顏色。文字後方的圖樣應保持低調：兩種顏色之間的對比越低，文字就越容易閱讀。
棋盤格的繪製方式
repeating-conic-gradient(#000 0 25%, transparent 0 50%)會在每個圖樣單元的中心周圍，繪製一圈中的第一與第三個四分之一區域，形成每個單元中的兩個對角方格；background-size則會將圖樣單元設為方格尺寸的兩倍。
組合圖樣
背景圖片會依序堆疊：在圖樣之後列出來自CSS漸層產生器的漸層，中間以逗號分隔，圖樣就會位於漸層上方。
使用方式
- 選擇圖樣。
- 選擇兩種顏色、重複尺寸，以及線條寬度或圓點大小。
- 複製CSS。
隱私與限制
所有操作都在您的瀏覽器中執行。
相關工具
常見問題
這些圖樣在每個瀏覽器中都能正常運作嗎？
可以。所有目前版本的瀏覽器都支援這些漸層，包括棋盤格使用的圓錐漸層。
如何在文字後方放置圖樣？
選擇兩種接近的顏色，讓圖樣保持低調，並讓文字保有足夠的對比度。
可以變更條紋的角度嗎？
可以。在複製的CSS中編輯repeating-linear-gradient的角度，例如將45deg改成60deg。
免費工具・使用在瀏覽器中次・免註冊