Android 上的 CSS 漸層產生器是一個以瀏覽器為基礎的工具，可直接在手機的行動瀏覽器中產生有效的線性或放射狀漸層程式碼，無需安裝任何應用程式。當你調整顏色、色標和角度時，工具會即時渲染預覽，然後輸出一段可立即貼上的 background: linear-gradient(...); 或 background: radial-gradient(...); 宣告，只要一次點選就能複製，並貼到任何樣式表中。由於它完全在 Chrome、Samsung Internet、Firefox 或任何其他現代 Android 瀏覽器中執行，因此無需從 Play 商店下載任何東西，也不需要授予任何權限。所有運算都在你的裝置本地進行，因此你實驗的顏色和設計永遠不會離開你的手機，而且輸出可以清晰地縮放至任何螢幕密度，絕不會顯得模糊或出現像素化。若要開始製作，請在 Android 瀏覽器中開啟 Color Gradient Generator，介面立即就可以開始使用。
為什麼在 Android 瀏覽器中執行，而不是安裝應用程式
Play 商店充滿了 Android 漸層應用程式，其中有些確實可用，但大多數只能匯出 PNG 影像，或是將複製 CSS 的功能鎖在註冊、廣告或應用程式內購買之後。以瀏覽器為基礎的 CSS 漸層產生器完全翻轉了這個模式：你開啟一個 URL、建立漸層，然後複製你原本得手寫的 background-image 宣告。沒有安裝任何東西，除了頁面渲染所需的內容之外也沒有任何快取，而且只要關閉分頁，這個工具就會從你最近的應用程式中消失。
由於輸出是單一 CSS 屬性而非點陣圖，因此無論手機、平板或外接螢幕丟出什麼螢幕密度——400 dpi、200 dpi 或 96 dpi——它都能清晰地等比例縮放，呈現完全相同的結果。你還能避免原生應用程式駐留在記憶體中所造成的電池耗損，並在手機內部空間每 MB 都很珍貴的情況下完全跳過儲存容量的問題。而且由於一切都在瀏覽器分頁中本地執行，你在回家火車上實驗的漸層會留在手機上，絕不會接觸到任何伺服器。
線性 vs 放射狀：先選對類型
在開始新增色標之前，請先決定哪種漸層形狀適合這項工作。兩種 CSS 漸層類型各有不同的視覺用途，一開始就選對能讓你免於之後重做整個項目。
| 類型 | 方向 | 最適合用於 |
|---|---|---|
| 線性漸層 | 沿著設定角度（0deg–360deg）以直線混合 | 主視覺與分區背景、按鈕、卡片、進度條、圖片疊加 |
| 放射狀漸層 | 從中心點以圓形向外混合 | 聚光燈、圖示後方的柔和光暈、暗角、徽章填色 |
如果你要填滿寬幅的水平橫幅或矩形卡片，線性漸層幾乎永遠是正確的選擇。如果你要點亮圓形頭像、標誌背景，或應該呈現柔和光暈的特色強調區，放射狀漸層無需任何額外標記就能給你那種由中心向外擴散的效果。
逐步在 Android 上建立 CSS 漸層
行動介面已針對觸控最佳化，因此每次調整都是點選或拖曳。以下是在手機上產生可用於正式環境的漸層的確切步驟。
- 選擇漸層類型。在 Android 瀏覽器中開啟 Color Gradient Generator，並點選 Linear 以獲得方向性漸層，或點選 Radial 以獲得由中心向外混合的效果。預覽面板會立即更新，讓你看到所選的形狀。
- 設定每個色標的顏色，並拖曳其位置滑桿。點選一個色標以開啟顏色選擇器，選擇你的十六進制值，然後沿著軌道拖曳該色標，將其固定在 0% 到 100% 之間的某個百分比位置。當你想在漸層中央保留某個顏色時，可新增一個色標；若想簡化混合效果，則可移除一個色標。對於線性漸層，請拖曳角度控制項以設定漸層方向。
- 檢查即時預覽，然後點選 Copy CSS。預覽會在手機螢幕上顯示精確的渲染結果。當漸層看起來正確時，點選 Copy CSS 按鈕，將完整的 background: linear-gradient(...); 或 background: radial-gradient(...); 宣告複製到剪貼簿，然後直接貼到你的樣式表、內聯 style 屬性，或同一部裝置上的程式碼編輯器應用程式中。
整個流程都在瀏覽器分頁中本地執行，因此即使在火車上訊號不穩的 Wi-Fi 連線下，預覽和程式碼面板仍能立即回應，無需任何網路往返。
解讀色標及其位置
無論是線性或放射狀，每個漸層都由一組色標定義。每個色標將一個顏色與一個 0% 到 100% 的位置配對，並由瀏覽器在兩者之間插值像素。兩個色標能讓你從一個顏色乾淨地漸變到另一個顏色。新增第三或第四個色標，你就能在特定位置保留一個顏色——例如，將 #00ff00 精確地固定在 50%，即可建立三色帶狀混合，而非單純的雙色漸變。
工具會自動依位置重新排序你的色標，並將每個值限制在有效的 0–100% 範圍內，這表示無論你如何拖曳、重新排序或實驗，它輸出的 CSS 永遠語法正確。你可以將色標相互拖曳越過以交換順序，透過點選加號圖示來新增色標，並移除不再需要的色標。由於預覽會即時反映限制後的值，你在螢幕上看到的，將與你將程式碼貼入專案後瀏覽器所渲染的結果完全一致。
常見線性漸層角度一覽
角度值控制線性漸層的方向。在 CSS 中，0deg 指向元素的頂部，90deg 指向右側，180deg 指向下方，270deg 指向左側。對角角度則位於這些基本方向的中間。
| 角度 | 方向 | 典型視覺效果 |
|---|---|---|
| 0deg | 由下往上 | 由底部向上升至天際 |
| 45deg | 由左下到右上 | 對角高光，主視覺橫幅常見 |
| 90deg | 由左到右 | 水平漸層，最常見的預設 |
| 135deg | 由左上到右下 | 對角陰影，經典的卡片疊加 |
| 180deg | 由上往下 | 垂直漸層，頁面分區背景 |
| 225deg | 由右上到左下 | 反向對角，鏡像的主視覺 |
| 270deg | 由右到左 | 反向水平，對 RTL 語言很實用 |
| 315deg | 由右下到左上 | 反向對角高光 |
如果你要將文字放在漸層上方，請調整角度，讓較暗的一側落在文字後方，然後在發布前將最終的前景與背景配對透過 color contrast checker 檢查，以確認符合 WCAG AA 的可讀性。
複製 CSS 並在手機上隨處使用
一旦預覽符合你的需求，Copy CSS 按鈕就會給你一行 CSS，讓你幾乎可以在 Android 上的任何地方貼上。將它放進你在程式碼編輯器應用程式中編輯的 HTML 檔案的 <style> 區塊。將它貼到 div、section 或 button 上的內聯 style 屬性。將它加入你在 Chrome 裝置模擬模式中測試的網站所代管的樣式表。或將它貼到接受原始 CSS 的設計工具中，例如 CodePen 草稿或本機網頁專案。
由於輸出是純 CSS 而非匯出的影像，因此可在所有現代瀏覽器中運作，無需廠商前綴、無需外部函式庫，也無需任何建置步驟。這代表著：一個 CSS 屬性、零次網路請求，以及一個能清晰縮放至任何元素大小或螢幕密度、永遠不會顯得模糊或像素化的漸層。如果你想探索自己手動可能不會選擇的組合，Randomize 按鈕只需一次點選就會換上新顏色和位置，讓你能在捲動動態消息的時間內快速試看十幾種外觀。
CSS 漸層在設計中能發揮作用的地方
- 主視覺與分區背景。單一線性漸層能用具有深度的視覺取代扁平的品牌色，而且通常不會增加額外的檔案大小。
- 按鈕與卡片填色。一個微妙的雙色標漸層能讓互動元素感覺更立體，同時不分散對內容的注意力。
- 徽章與標籤。對於需要柔和光暈而非硬邊緣的小型裝飾形狀，放射狀漸層效果很好。
- 進度條與載入狀態。橫跨長條進行動畫的線性漸層，即使底層數值沒有變化，也能呈現出動態感。
- 圖片疊加。在照片上疊加半透明漸層，能讓白色標題在影像的亮部與暗部都保持清晰可讀。
- 裝飾性分隔線與分區線。一條寬幅的漸層帶能分隔內容區塊，又不會像實體分隔線那樣厚重。
挑選適合形狀的類型、調準角度、調整色標直到預覽看起來正確，然後將產生的 CSS 複製到你的專案中。那一套單一的工作流程——挑選、預覽、複製——就能涵蓋你從 Android 手機發布所需的所有漸層。
如果你在權衡選項，Plan the Steps Needed to Generate a CSS Cubic Bezier 對此有詳細介紹。
如果你在權衡選項，Plan the Steps Needed to Generate an SVG Blob 對此有詳細介紹。