跳至主要內容
Lizely

CSS 梯度產生器

建立一個三色線性漸層，並設定精確的角度與有序的百分比停點，然後複製驗證過的 CSS 宣告。

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

使用方式

  1. 1.設定角度從 0 到 360 度。
  2. 2.選擇三種六位元組的顏色。
  3. 3.請將三個百分比停點依升序排列。
  4. 4.複製宣告與測試內容，並在整個漸層中進行對比。

關於CSS 梯度產生器

CSS Gradient Generator 會產生一個精確的三色線性漸層，無需在瀏覽器開發工具中重複編輯。選擇角度，選擇三種六位元組十六進位顏色，並將每種顏色的停點從零至百分之一百進行定位。預覽會使用 CSS 宣告中返回的精確線性漸層值，因此顯示結果與複製的程式碼共享同一來源。該工具明確保留所有三個停點，讓漸層過渡結構容易審查與調整，當宣告移入樣式表中後即可立即使用。

一個 CSS 線性漸層是瀏覽器產生的圖片。其第一個引數定義漸層線的方向，其餘引數則定義沿該線各位置的顏色。角度以 CSS 度為單位。零度指向上方，九十度指向右方，一百八十度指向下方，二百七十度指向左方。完整三百六十度視為零度的等效值。中間值會產生對角線效果，而實際的對角線視覺效果會因漸層框的尺寸而異。

色彩停點決定每個選取色彩的定位。這個產生器使用百分比位置，並要求這些位置必須按遞增順序排列。允許相鄰停點相同，並會產生硬性過渡。降序停點會被拒絕，而不是依賴 CSS 的修補演算法，因為在互動設計時，明確的錯誤更易理解。百分比值會維持在零至一百之間，覆蓋可見的梯度線。CSS 可以表示超出此範圍的停點，但這進階行為刻意不包含在目前的控制項中。

每種顏色都會被轉換為六位元組的十六進位值。原生顏色輸入讓選擇更可預測，邏輯驗證可防止不完整或模糊的字串進入宣告。此工具不會計算對比度或在自訂顏色空間中進行插值。瀏覽器的顏色插值行為與顯示特性可能影響對中點的感知。若品牌準確性或視覺均勻性至關重要，建議以實際瀏覽器支援與專案需求進行測試。

漸層可取代裝飾性點陣圖圖片並支援縮放，但並非沒有設計風險。文字疊加在漸層上可能在某一點符合對比度，而在另一點則失敗。應測試整個文字區域，而非單一取樣顏色。強烈的多色背景可能分散注意力，影響操作層次。建議使用細膩的雙色變體、疊加層或實體備用方案。避免僅透過顏色傳達狀態，並確認主題、強制顏色模式、列印與截圖的正確性。

此宣告使用背景簡寫以便方便複製。若現有元件也需要背景顏色、圖片層、位置或尺寸，請小心整合漸層或切換至背景圖片，以免簡寫重設其他背景子屬性。多個漸層可用逗號分隔，但此產生器僅產生一個線性層。為保持結果易讀且可測試，故意省略放射狀、圓錐形、重複、透明度-alpha 和插值空間控制項。

所有運作皆在當前標籤中本機執行，不會上傳或儲存任何內容，無需帳號，也無需額外依賴。從 0、50 與 100 百分比開始設定停點，調整角度以符合元件的長寬比，再移動中間停點以控制過渡最強烈的位置。僅在測試實際內容、響應式尺寸、全表面對比度以及支援環境所需的備援方案後，才複製 CSS。

方法與來源

驗證 0–360 度數的角、三個六位元十六進位顏色、以及順序排列的 0–100 百分比停點，然後序列化一個標準的三停線性漸層，並使用該精確值進行預覽與複製。

常見問題

為何停點必須依照升序排列？
有序的控制項讓設計意圖明確呈現；相等的停點可能產生生硬的邊界，而降序停點則會被拒絕，而非默默修正。
為何同一角度在另一個框中看起來不同？
漸層線條是依據漸層框來解析的，因此改變元素的長寬比會導致對角線的視覺變化。
這會檢查文字對比嗎？
不會。對比可能在表面各處有所不同，因此必須測試所有出現文字或控制項的區域。

相關工具

開發者工具 使用指南

查看全部