跳至主要內容
Lizely

CSS 線條生成器

產生一個可預測的重複條紋背景，包含驗證過的角度、兩種顏色、條紋寬度與間隙寬度，然後複製一個 CSS 宣告。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.設定 CSS 條紋的角度。
  2. 2.選擇條紋與間隙顏色。
  3. 3.調整每個條頻寬度並檢視重複週期。
  4. 4.複製背景影象宣告，並在實際元件中測試對比度與縮放。

關於CSS 線條生成器

CSS 條紋生成器會從標準的 CSS 漸層中產生一個重複的雙色背景。選擇一個角度、條紋顏色、間隙顏色、條紋寬度與間隙寬度。該工具會將兩者寬度相加來計算一個週期，然後寫出四個明確的顏色停點：第一種顏色從零到條紋邊界，第二種顏色從該邊界到週期結束。預覽會使用複製背景影象宣告中的精確重複線性漸層值，確保計算、顯示與剪貼簿輸出一致。

重複線性漸層會在梯度線的兩個方向上重複最終顏色停點間隔。此生成器使用像素長度來確保條頻寬度的確定性。一個十像素條紋與五像素間隙會產生十五像素的週期。兩種顏色均出現兩次，因此每個邊界都是清晰的，而非混合。相同的停點位置會直接從一種顏色切換到另一種。輸出不依賴於網格影象，能在高密度螢幕上保持清晰，並能在大面積上無需下載資源即可擴充套件。

角度範圍為 CSS 度，從零到三百六十度。零度指向梯度線的上方，九十度指向右方，中間值則產生對角線。在水平或垂直螢幕軸上的可見間距會隨著角度改變，因為寬度是沿梯度線測量的。因此，一個十六像素的對角條帶不會佔據十六個水平像素。請在代表性的元素尺寸下使用預覽，並檢查最終容器，而非將數值寬度視為螢幕軸的測量值。

條頻寬度必須至少為一像素，且不超過兩百像素。顏色必須為完整的六位十六進位值。空值或非有限數值輸入會視為錯誤，以避免意外產生零長度週期。極小的條帶可能在滾動時產生莫爾紋、閃爍，或在瀏覽器縮放與截圖時出現不穩定的視覺效果。極大的條帶可能導致重複模式無法辨識。此生成器刻意排除透明度、多個中間顏色、圓形模式、放射狀模式、背景定位與動畫，以確保結果可追蹤與審核。

圖案背景可能幹擾文字與控制項。每個邊界處的對比度都會變化，快速條紋可能造成視覺壓力。請勿將長文字直接疊加在強烈圖案上，除非有實體覆蓋層或封裝的閱讀區域。避免僅以條紋方向或顏色作為狀態提示。應測試強制顏色、深色主題、縮放、列印、截圖與動態情境。若背景會移動，請尊重減少動畫偏好設定，並測量繪圖行為；靜態的裝飾性圖案通常更安全且清晰。

所有處理都在目前分頁進行，不會有任何上傳、儲存、登入或新增的依賴需求。輸出使用 background-image 而非 background 篩選器，降低重置現有背景色彩、尺寸或位置的機率。多重背景層仍需謹慎排列逗號順序。將宣告複製至真實元件中，加入實體備用方案，確認整個區域的文字對比度，檢查響應式尺寸與縮放，並在適當情況下將字面色彩或尺寸替換為已建立的設計詞彙。

方法與來源

驗證 0–360 的角度、兩組六位數顏色，以及有限的正數條頻寬度；計算一個週期的條帶與間隙寬度；序列化四個硬邊停點；並將此精確重複的漸層套用於預覽。

常見問題

為何對角線上的條紋看起來不同？
長度是沿梯度線測量的，因此其水平與垂直投影會隨著所選角度改變。
為何停用清單中會重複出現顏色？
重複的邊界位置會產生生硬的邊緣，導致瀏覽器無法將一個條帶平滑過渡到下一個條帶。
此檢查會針對圖案的文字對比度進行驗證嗎？
不會。對比度會在各條帶之間變化。請增加一個實體閱讀表面或疊加層，並測試整個文字區域。

相關工具

開發者工具 使用指南

查看全部