建立漸變
可輸入HEX、rgb()、hsl()或支援的CSS顏色名稱。不支援透明度。
線性漸變：2種顏色，角度90°。
輸入0至360的整數。0°向上、90°向右、180°向下、270°向左。
中間顏色位於0%或100%時，可能出現明顯的顏色分界。
正在準備編輯器。完成前顯示的值是固定範例。
使用方法
- 選擇兩種顏色。啟用3種顏色後，顯示順序為起始、中間及結束顏色。
- 選擇線性或放射狀。線性漸變可調整角度，3色漸變可調整中間顏色位置。
- 選取色標以複製顏色值，或複製CSS值、CSS宣告及分享連結。
支援的顏色格式
可輸入HEX、rgb()、hsl()或支援的CSS顏色名稱。不支援透明度。
使用3種顏色時，第二種顏色會成為中間顏色，第三種則是結束顏色。
放射狀漸變由元素中心以圓形向外延伸，不設角度選項。
將CSS宣告貼入樣式規則。漸變應使用background-image，而不是background-color。
HSL值經過四捨五入。如需保留準確的8位元顏色，請使用HEX。
請檢查文字覆蓋範圍內的所有背景顏色。只檢查兩端顏色，無法判斷整個漸變的對比。
常見問題
支援哪些顏色格式？
支援HEX、rgb()、hsl()、部分常用CSS顏色名稱，以及37, 99, 235這類數值RGB三元組。不支援透明度、廣色域顏色函數，亦不涵蓋所有CSS顏色名稱。
使用3種顏色有甚麼變化？
第一種顏色維持在0%，第二種成為指定位置的中間顏色，第三種則是100%的結束顏色。加入第三種顏色是讓漸變經過另一種顏色，不保證更平滑或更容易閱讀。
可以移動放射狀漸變的中心嗎？
這個版本固定使用以元素中心為圓心的圓形漸變。角度設定只適用於線性漸變。
分享連結會儲存甚麼？
連結包含使用中的顏色、漸變類型、線性漸變的角度、3色漸變的中間位置，以及已選取的色標。不儲存隱藏草稿或編輯記錄，並會盡量讀取舊版連結。
可以判斷漸變上文字的對比嗎？
此工具不提供對比判定。漸變的背景顏色會隨位置改變，因此只檢查兩端顏色並不足夠。請檢查文字覆蓋範圍內的實際背景。
可以匯出圖片或設計檔案嗎？
不提供此功能。您可以複製CSS值、background-image宣告、各個顏色值及分享連結，但不能匯出PNG、SVG或設計檔案。