任務路徑 / 從輸入到結果
如何組合 CSS 漸層
- 01
選擇漸層類型
開啟「漸層類型」，選「線性」得到直線過渡，選「放射」得到圓形過渡。預覽角標會在你調整時顯示目前角度。
- 02
設定方向或焦點
「方向 / 焦點」範圍為 0 到 360。對線性漸層，它是角度值（度）；對放射漸層，它把焦點放在環繞中心的一圈上。
- 03
挑選顏色與停止點
設定「起始顏色」和「結束顏色」，然後定位「起始停止點」（0–99%）和「結束停止點」（1–100%）。起始必須位於結束之前，否則狀態會變為「檢查數值」。
- 04
控制混合帶寬
兩個色標之間的距離就是過渡區：相隔 1% 的色標產生近乎硬邊的雙色條紋；而 0% 和 100% 的預設值給出最柔和的全寬混合。看預覽，而不是看數字。
- 05
複製宣告
點「複製 CSS」，或點「下載 .css」儲存 toolars-gradient.css。.gradient 規則只有一條 background 宣告——linear-gradient(…deg, …) 或 radial-gradient(circle at …, …)——與你的停止點精確對應。
- 06
應用並擴展
這條單宣告可以與你自己的 background-size 或 background-repeat 乾淨組合。需要第三種顏色？複製規則後手動插入一個中間色標——你調好的兩個色標會錨定混合的兩端。只有一行，也能整齊地貼進自訂屬性，適合用 token 管理的設計系統。