01
何時使用此工具
使用此工具可建立雙色網頁背景或卡片重點色。選擇起始色和結束色、線性或徑向類型，以及角度，即可同時取得預覽和 CSS。
漸層生成器
透過即時預覽產生線性漸層或徑向漸層代碼。
漸層生成器
僅供規劃與參考使用的瀏覽器端結果。
使用前的檢查事項
02
結果如何生成
線性模式會使用輸入角度建立 linear-gradient；徑向模式會建立圓形 radial-gradient。瀏覽器會在兩個色標之間渲染中間顏色。
03
實際範例與解讀
將起始色設為 #3366FF，結束色設為 #FF6655，角度設為 90 度以建立左到右背景宣告。將它複製到實際元件中，並重新檢查上方任何文字的對比度。
04
適用範圍與限制
此生成器使用兩個色標，無法消除瀏覽器間的色彩插值差異。請在完整編輯器中加入複雜色標、alpha 過渡或寬色域顏色。
常見問題
如何將漸變生成器中的顏色移到另一個應用程式？
使用結果下方的複製按鈕複製 CSS、HEX 或 HSL 文字。確認目標應用程式解讀相同的顏色格式。
漸變生成器的螢幕顏色會與列印一致嗎？
不會自動相符。發光 RGB 螢幕和反射式紙張與墨水使用不同的色域與混色模型，因此仍需要列印設定檔和打樣。
我可以只憑漸變生成器就批准一個設計 token 嗎？
先將其作為候選，接著測試真實背景、深色模式、互動狀態與文字對比度，再命名並批准 token。