隨機工具 / 008
CSS 漸層產生器
視覺化調整角度、色彩停駐點與透明度，即時預覽並複製可直接使用的 CSS linear-gradient。
background: linear-gradient(90deg, rgba(255, 106, 0, 1) 0%, rgba(255, 213, 0, 1) 100%);為什麼做這個
手刻 linear-gradient 常常要來回試角度跟色彩停駐點的位置。這個版本把調整過程視覺化，拖拉就能看到即時預覽，滿意了直接複製可用的 CSS。
這個工具怎麼用
漸層由三件事決定：方向、有哪些顏色、每個顏色停在哪個位置。角度滑桿控制方向，0 度是由下往上，90 度是由左往右；每一列色彩停駐點則是一個顏色加上它在漸層中的百分比位置。
位置欄決定顏色落在漸層的哪一段。兩個停駐點的位置拉得越近，中間的過渡就越短、界線越明顯；拉遠則過渡越柔和。想做出色塊分明的條紋效果，把兩個位置設成相同數值即可。
透明度欄讓顏色帶上 alpha 值，常用於把漸層疊在圖片上當遮罩——例如從全透明漸變到半透明黑，讓圖片下緣的白字讀得清楚。
下方輸出的是完整的 background 宣告，複製後可直接貼進 CSS 檔或設計工具。
常見問題
角度的 0 度是哪個方向？
CSS 的 linear-gradient 以 0deg 為由下往上，角度順時針增加：90deg 是由左往右，180deg 由上往下。這與數學上的角度慣例不同，調整時直接看預覽區最快。
為什麼漸層中間會出現一條灰灰的帶子？
這是兩個對比色在 sRGB 空間內插時經過低飽和區造成的，常見於藍配黃這類組合。解法是在中間補一個停駐點，指定一個你想要的過渡色，讓它不要自己走過灰帶。
可以做放射狀或圓錐狀漸層嗎？
目前只產生線性漸層（linear-gradient）。你可以把複製出來的顏色與停駐點原封不動改成 radial-gradient 或 conic-gradient，色彩設定的語法是共用的。
產生的 CSS 相容性如何？
linear-gradient 是標準語法，所有現代瀏覽器都支援，不需要加瀏覽器前綴。若使用了 alpha 透明度，顏色會以 rgba 形式輸出，同樣是通用寫法。