Web、UI與CSS

漸層顏色位置不對？檢查角度與色標

使用工具

想左右漸層卻成斜向，改色碼也不解決。應把色彩、方向、停止位置分開。目前介面可用兩色與角度產生 CSS；下文位置修改是輸出 CSS 的延伸閱讀，不是宣稱介面已有的控制項。

從左到右的雙色輸出

background: linear-gradient(90deg, #4F46E5 0%, #22D3EE 100%);

填 #4F46E5、#22D3EE、90 度，首色左、次色右；180 度則上到下。CSS 零度向上、順時針增大，與數學常見橫向零度不同，先用簡單方向建立基準。

排查方向時別同時換角度與交換色彩。一次改一項，觀察 CSS 是角度還是色彩順序變化，才能理解效果並還原。

色碼後的百分比指定漸層線位置，0% 不等於透明，100% 不等於不透明。透明度是色彩 alpha。應區分延長色塊與改變濃淡或透明度。

在使用處修改位置的 CSS 範例

background: linear-gradient(90deg, #4F46E5 30%, #22D3EE 70%);

這是複製 CSS 後在使用處修改的範例。30% 前保持首色，30～70% 過渡，之後保持次色。目前雙色介面無專門位置欄，不要把整條宣告貼進色彩輸入。

在 50% 切換色彩的 CSS

background: linear-gradient(90deg, #4F46E5 50%, #22D3EE 50%);

兩個色標同為 50% 會消除過渡區形成明確切換。漸層不必總是模糊色帶。若想分區卻出現大片中間色，應在使用處檢查停止位置。

同角度與色標在方形預覽和寬橫幅中分布觀感不同。百分比是漸層線位置，不是簡單標螢幕橫寬。應在實際尺寸、圓角、間距下檢查複製 CSS。

疊字時應檢查實際文字下最難讀的背景。對比工具只算給定色對，不自動掃描全漸層或文字位置。變化背景需在實際版面逐處檢查。

先在 0%/100% 兩色下定方向，再調色彩，必要時在使用處改停止點。一次改一維更清楚，最後用大小螢幕與實際文字檢查，別只看空色塊。

工具不取得背景 URL 或匯入他站 CSS，只由輸入色彩產生宣告。多背景、動畫、指定內插色彩空間等需另行處理，單條輸出不等於背景設計全部完成。