一個帶有四個硬邊色標的repeating-linear-gradient宣告，能建立確定性的CSS條紋，在任何縮放層級下都保持銳利，並可在大面積上延伸使用，不需要下載任何點陣圖片。CSS Stripes Generator讓你可以設定0到360度之間的角度、選擇兩組六位數的十六進位色碼，並以像素為單位，調整條紋與間隔的寬度。這個工具會把兩個寬度相加，組成一個圖樣週期，接著寫出四個明確的色標：第一個顏色從零到條紋邊界，第二個顏色從那個邊界到週期結尾。由於兩種顏色都會在每個邊界重複出現一次，瀏覽器會立即切換而不進行混合，因此能產生乾淨的邊緣。預覽畫面使用的，正是你會複製的那個精確repeating-linear-gradient數值，因此你看到的內容，會與最終輸出完全一致。這種做法，能避免非常細的條紋可能出現的摩爾紋與閃爍，也能避免非常粗的條紋失去圖樣可辨識性。整個過程都在目前的分頁中執行，不需要上傳、不需要儲存、不需要登入，也不會加入任何額外的相依套件，而且輸出結果使用background-image，而不是background簡寫屬性，藉此降低重設既有背景顏色或位置的可能性。試試看CSS Stripes Generator，在你的瀏覽器中親自體驗。
為什麼CSS條紋需要硬邊色標
標準的線性漸層，會在整條漸層線上混合顏色，產生柔和的過渡效果。當你想要銳利的條紋時，需要的是硬邊——也就是一種顏色結束、下一種顏色開始的清楚界線。CSS Stripes Generator透過在色標清單中，於相同位置重複同一個顏色，來達成這個效果。舉例來說，如果你設定10像素的條紋與5像素的間隔，這個工具會計算出15像素的週期，並寫出四個色標：條紋顏色在0%與66.67%（10/15）處，間隔顏色則在66.67%與100%處。瀏覽器看到兩個相同的位置，就會立即切換，產生乾淨的邊緣。如果沒有這些重複的色標，瀏覽器就會在一小段距離內混合顏色，讓條紋變得柔和。這個方法記載於W3C CSS Images Level 3規範與MDN的repeating-linear-gradient參考文件中，這兩份文件說明了重複漸層，如何沿著漸層線的兩個方向，延伸最後一個色標區間。
角度與寬度如何影響可見間距
條紋寬度是沿著漸層線來量測的，因此它們在水平與垂直方向上的投影，會隨著選定的角度而改變。0°角度指向上方，代表一條16像素的條紋，會佔用16個垂直像素，但在水平方向上會無限延伸。90°角度指向右方，因此同一條16像素的條紋，會佔用16個水平像素。在45°時，這條條紋在兩個軸向上，各自佔用大約11.3像素（16 × √2/2）。這種投影效果，代表即使數值上的寬度保持不變，畫面上可見的間距，也會隨角度而改變。CSS Stripes Generator的預覽畫面，會以一個具代表性的元素尺寸，顯示精確的repeating-linear-gradient，但你應該一律以最終容器來檢查，而不是把數值上的寬度，當成螢幕座標軸上的量測值。如果無論角度為何，你都需要維持一致的水平間距，請一邊觀察預覽畫面，一邊調整條紋與間隔的寬度。
| 角度（度） | 漸層線方向 | 可見間距效果 |
|---|---|---|
| 0 | 向上 | 條紋寬度等於垂直像素數；水平間距為無限大。 |
| 90 | 向右 | 條紋寬度等於水平像素數；垂直間距為無限大。 |
| 45 | 對角線（左上到右下） | 條紋寬度在兩個軸向上等比例投影；可見間距會縮小√2倍。 |
| 135 | 對角線（右上到左下） | 投影方式與45°相同，但呈鏡射。 |
用四個步驟建立CSS條紋圖樣
- 設定條紋方向的CSS角度。輸入一個介於0到360度之間的數值。零度指向上方，九十度指向右方，中間的數值則會產生對角線。預覽畫面會立即更新。
- 選擇條紋與間隔的顏色。輸入兩組完整的六位數十六進位數值（例如#ff5733與#33ff57）。這個工具會驗證格式，並在預覽畫面中顯示顏色。
- 調整每個色帶的寬度，並檢查重複週期。以像素為單位，設定條紋與間隔的寬度，範圍從1到200。這個工具會把兩個寬度相加，組成一個圖樣週期，並更新預覽畫面。非常細的色帶可能會產生摩爾紋；非常粗的色帶則可能無法再被看成是重複圖樣。
- 複製background-image宣告，並在實際元件中測試對比度與縮放效果。點選複製按鈕，把精確的repeating-linear-gradient數值放進剪貼簿。把它貼進你的樣式表中，如有需要，再加上一個純色的備援背景，並在實際元件中，檢查文字對比度、響應式尺寸，以及縮放行為。避免在沒有純色疊層的情況下，把長段文字直接放在強烈的圖樣上。
什麼時候該使用純色疊層或備援方案
圖樣化的背景，可能會干擾文字與控制項，尤其是當對比度在各色帶之間有所變化時。密集的條紋可能會造成視覺壓力，有些使用者可能會感到不適，或閱讀性降低。CSS Stripes Generator不會檢查圖樣上方的文字對比度——你必須自己測試。如果你把文字或互動元素，放在條紋上方，請加上一個純色疊層，或一個獨立的閱讀區域，並確認整個區域的對比度。請測試強制色彩模式、深色主題、縮放、列印、螢幕截圖，以及動態情境。如果背景會移動，請尊重減少動態效果的偏好設定，並量測繪製行為；靜態的裝飾性圖樣，通常比較安全也比較清楚。對於狀態指示，請避免只依賴條紋方向或顏色——請搭配圖示或文字標籤等額外的指示方式。
輸出結果如何處理多層背景
CSS Stripes Generator輸出的是單一的background-image宣告，而不是background簡寫屬性。這能降低重設既有背景顏色、尺寸，或位置的可能性。如果你需要多層背景，就必須自己手動組合。background-image屬性中，圖層的順序很重要：第一層最靠近檢視者，後續的圖層則會顯示在它後面。舉例來說，如果你想在條紋後面放一個純色，可以這樣寫：
background-image: repeating-linear-gradient(45deg, #ff5733 0 10px, #33ff57 10px 15px), linear-gradient(#ffffff, #ffffff);請務必在實際元件中測試最終外觀，因為圖層順序與堆疊環境，可能會影響可見度。在適當的情況下，把寫死的顏色或尺寸，換成既有的設計token，以維持整個專案的一致性。
延伸閱讀：圓形按鈕CSS：調校半徑、內距與顏色。
延伸閱讀：給開發者的Excel公式速查表API替代方案。