CSS 條紋產生器會輸出一個基於 repeating-linear-gradient 所建立的 background-image 宣告，其中一個圖案週期等於條紋寬度加上間距寬度，而輸出會使用四個明確的顏色停駐點搭配重複的邊界位置，確保每一條色帶邊緣都保持清晰。這個工具接受五個輸入:一個介於零度到三百六十度之間的 CSS 角度、兩個六位數十六進位顏色，以及兩個範圍介於一到兩百像素之間的有限正數色帶寬度。通過驗證後，它會將兩個寬度加總為一個週期，然後寫出四個停駐點，以呈現一個週期加上兩個顏色的重複，如此瀏覽器就不會在任何邊界處將兩個色帶混合在一起。這段精確的宣告會驅動螢幕上的預覽以及剪貼簿的複製內容，所以你看到什麼就是貼上什麼。由於所有運作都在當前瀏覽器分頁中執行，因此不需要任何圖片素材、點陣圖匯出或第三方相依套件，就能產生銳利且可重複的條紋背景，在任何容器中都能乾淨地縮放，而且輸出使用的是 background-image 而非 background 簡寫，因此不會重設既有的背景顏色、大小或位置。
產生器的輸出內容
CSS 條紋產生器唯一的產出是一段可以貼到任何樣式表或行內樣式的 CSS 宣告。該宣告使用 background-image 屬性搭配 repeating-linear-gradient() 函式，並透過四個硬邊的顏色停駐點來表達雙色圖案。這個產生器不會產生任何其他 CSS:沒有定位、沒有動畫、沒有後備樣式、沒有圓錐或放射狀的替代方案，也沒有 background-color 的重設。這樣狹窄的輸出範圍是刻意設計的，因為單一屬性可以被檢查、稽核和替換，而不會影響樣式表的其他部分。
這個圖案是由一個週期所構成，其中週期 = 條紋寬度 + 間距寬度。在該週期內，第一個停駐點填滿條紋色帶，第二個停駐點填滿間距色帶，第三和第四個停駐點重複相同的起始位置，讓瀏覽器在每個邊界繪製硬邊過渡，而不是內插混合。因為 repeating-linear-gradient 會沿著漸層線在兩個方向重複最後一個停駐區段，這個硬邊結構會擴展到整個繪製區域，無論元素變得多大。
這個工具不會產生點陣圖、data URL、SVG 或任何外部素材。一切都留在當前分頁中:沒有上傳、沒有儲存、沒有登入，也沒有第三方相依套件。螢幕上的預覽使用的是會進入剪貼簿的那段精確宣告，所以預覽、計算和貼上的輸出保證完全一致。
必要的輸入與有效的範圍
| 輸入 | 格式 | 範圍 | 備註 |
|---|---|---|---|
| 角度 | 數字，度數 | 0 到 360(含) | 0° 指向上方，90° 指向右方，中間值會產生對角線。 |
| 條紋顏色 | 六位數十六進位(#RRGGBB) | 必填，不接受簡寫 | 不含 alpha 通道、不接受顏色名稱、不接受透明。 |
| 間距顏色 | 六位數十六進位(#RRGGBB) | 必填，不接受簡寫 | 不含 alpha 通道、不接受顏色名稱、不接受透明。 |
| 條紋寬度 | 像素值 | 1 到 200(含) | 必須為有限且正數;沿著漸層線測量。 |
| 間距寬度 | 像素值 | 1 到 200(含) | 必須為有限且正數;沿著漸層線測量。 |
空白欄位和非有限的數值輸入會被驗證機制拒絕，以避免意外產生零長度的週期。兩個寬度都至少為一個像素，也保證四個停駐點涵蓋正距離，讓漸層線有地方可以渲染。兩百像素的上限則防止任何單一色帶佔滿整個預覽，同時仍保留足夠空間給中等尺寸的可讀條紋。想進一步了解漸層語法本身的行為，可以參考 MDN 的 repeating-linear-gradient 參考文件以及 W3C CSS Images Level 3 規範，其中詳細說明了角度、漸層線以及最後一個區段的重複方式。
四個步驟建立條紋
- 設定 CSS 角度。選擇介於 0 到 360 之間的值。使用 0° 會產生水平方向的條紋，90° 會產生垂直方向的條紋，任何中間值則會產生對角線。
- 選擇條紋和間距的顏色。輸入兩個完整的六位數十六進位值，例如 #0F4C81 和 #F2F2F2。這個工具不接受簡寫、顏色名稱或透明值，所以請挑選設計調色盤中已有的顏色。
- 調整每個色帶寬度並檢視重複週期。以像素設定條紋寬度和間距寬度。預覽會以「條紋寬度 + 間距寬度」為一個週期來平鋪;如果對角線的視覺厚度與預期不同，這是因為寬度是沿著漸層線而非螢幕軸測量。
- 複製 background-image 宣告並在實際情境中測試。使用複製動作取得精確的 background-image 宣告，將它貼到實際元件中，加入一個實色的後備背景顏色，並在不同響應式尺寸、縮放等級和主題下檢查結果。最終請檢查實際容器，而非僅憑預覽就決定上線。
輸出宣告的結構解析
輸出是一段 background-image 宣告，其值為單一的 repeating-linear-gradient() 呼叫。在這個呼叫中，角度在最前面，接著依序是四個顏色停駐點。試想條紋寬度為 10 像素、間距寬度為 5 像素，週期就是 10 + 5 = 15 像素。這段宣告會顯示一個完整週期加上兩個顏色的重複，確保瀏覽器無法在色帶邊緣產生混合:
background-image: repeating-linear-gradient(45deg, #0F4C81 0 10px, #F2F2F2 10px 15px, #0F4C81 15px 25px, #F2F2F2 25px 30px);
從左到右閱讀這些停駐點:
- 0 到 10px:條紋顏色填滿週期中的第一個色帶。
- 10px 到 15px:間距顏色填滿週期中的第二個色帶。
- 15px 到 25px:條紋顏色在重複位置 15px 重新開始，再延伸 10 像素，讓下一個週期以硬邊開始，而非以內插混合開始。
- 25px 到 30px:間距顏色在重複位置 25px 重新開始，再延伸 5 像素，同樣確保硬邊效果。
因為 repeating-linear-gradient 會沿著漸層線在兩個方向重複最後一個停駐區段，這個圖案會以硬邊的形式延伸到停駐點所示 30 像素視窗之外。把任一色帶的起始位置設定為與前一個結束位置相同的值，正是讓每個邊界都保持銳利的關鍵。想更深入理解同一套漸層邏輯，可以閱讀 CSS 條紋圖案指南，適合想手動推敲停駐點的讀者。
角度參考與對角線寬度
| 角度 | 漸層線方向 | 典型視覺結果 |
|---|---|---|
| 0° | 指向上方(朝頂端) | 垂直漸層線;色帶垂直於漸層線排列。 |
| 90° | 指向右方 | 水平漸層線;色帶垂直於漸層線排列。 |
| 45° | 由左上至右下 | 對角漸層線;色帶形成經典的斜向條紋。 |
| 135° | 由右上至左下 | 對角漸層線;鏡像的斜向條紋。 |
這個產生器中的寬度是沿著漸層線測量，而不是沿著螢幕的水平或垂直軸測量。這代表一個在 45° 下設定的 16 像素色帶，並不會佔據 16 個水平或垂直像素;它在每個螢幕軸上的投影寬度會較小，而且投影會隨著所選角度而改變。這個工具不會計算精確的投影像素數;它取決於瀏覽器在選定角度下對 repeating-linear-gradient 的渲染方式，這也是為什麼預覽應該以代表性的元素尺寸進行檢查，而不是當作螢幕軸的測量值來看待。
限制與驗證規則
因為這個產生器的設計範圍刻意縮窄，其他圖案工具所提供的某些選項並不在它的合約範圍內。這個工具不會產生透明 alpha、多個中間顏色、圓錐圖案、放射狀圖案、background-position 位移或動畫。每次的輸出都是一個靜態、確定性的雙色條紋圖案，任何進一步的樣式設定都必須透過樣式表的其他部分來完成。
規劃圖案時需要留意的其他限制:
- 兩個色帶寬度必須至少為 1 像素，且最多為 200 像素。超出此範圍的值不會被接受。
- 兩個顏色都必須是完整的六位數十六進位值並帶有前置井字號;不接受 #fff 之類的簡寫及顏色名稱。
- 空白輸入和非有限的數值輸入會被標記為錯誤，避免意外產生零長度的週期。
- 非常小的色帶(約 1 到 2 像素)在捲動時可能產生摩爾紋、閃爍，或在瀏覽器縮放和截圖下呈現不穩定的外觀。
- 非常大的色帶(接近 200 像素)可能會失去重複圖案的感覺，開始看起來像兩個平實的色塊。
由於輸出使用的是 background-image 而非 background 簡寫，因此不會重設既有的 background-color、background-size 或 background-position。如果目標元素已經有多個背景圖層，新宣告仍然需要在以逗號分隔的列表中正確排序。
Placement, Contrast, and Accessibility
A repeating stripe is a strong visual texture, and that strength can work against readability. Contrast between the two band colors is constant at the band interior but visually drops to whatever the page background is at each band boundary, so any text placed directly over a strong stripe inherits a noisy reading surface. Add a solid overlay or a contained reading surface, such as a card, a panel, or a translucent block, before placing long passages over the pattern.
Stripe direction and color should never be the only signal that conveys status. A loading bar that relies on stripe direction to mean running becomes invisible in forced-colors mode, in monochrome printing, and to anyone using a screen reader. Pair any directional or color cue with a label, an icon, or a text description that survives without the pattern.
Patterns also deserve a quick environmental check before shipping. Test forced-colors mode, dark themes, browser zoom, print, and screenshots. If the background moves or animates, respect prefers-reduced-motion and measure paint behavior, because a static decorative stripe is usually safer and clearer than a moving one. None of this is enforced by the generator itself, so these checks belong in the integration step where the declaration is pasted into the real component. Once the declaration is in production, replace the literal hex values and pixel widths with the design tokens the codebase already uses.
For a deeper look, see Camel Case to Snake Case Cheat Sheet: Six Naming Styles.