iPhone 上的漸層產生器是一款可在 Safari 中執行的瀏覽器型工具，讓你以視覺化方式設計 CSS 線性或放射狀漸層，並複製可直接套用的程式碼，無需從 App Store 安裝任何東西。Color Gradient Generator 可在任何 iOS 瀏覽器的 /color/color-gradient-generator/ 開啟，於分頁內本地運作，並輸出一段 background: linear-gradient(...); 或 background: radial-gradient(circle, ...); 宣告，可直接貼到樣式表、Tailwind 設定檔、CodePen 片段或設計工具中。由於所有運算都在瀏覽器分頁中進行，因此不會上傳任何設計資料、不需要註冊帳號，也不需要透過 App Store 更新任何東西。即時預覽會精準反映瀏覽器實際呈現的結果，角度滑桿對應 CSS 角度（0deg 為向上、90deg 向右、180deg 向下），每個色彩停駐點都會被限制在有效的 0–100% 範圍內，因此即使你在觸控螢幕上把停駐點互相拖曳經過或重新排序，複製出來的 CSS 永遠都語法正確。
瀏覽器 vs App：在 iPhone 上挑選漸層工具
App Store 上的漸層 App 通常只能匯出 PNG 或 HEIC 桌布、將 CSS 功能鎖在付費方案之後，或限制免費方案可儲存的停駐點數量。瀏覽器型工具（例如 Color Gradient Generator）則跳過了這一切。沒有下載、沒有 App 內購買、沒有註冊、沒有上傳步驟，因為渲染器與程式碼產生器都在同一個 Safari 分頁中執行。在 iPhone 上，這點至關重要，原因有三。
首先，輸出的是純 CSS，而不是圖片。background: linear-gradient(90deg, #ff7a59, #4f46e5); 這段宣告可清晰地縮放至任何元素尺寸、任何螢幕密度，以及 Retina 螢幕上的任何容器寬度；而 1170×2532 的 PNG 匯出檔一旦拉伸到桌面版主視覺區，就會立即出現像素化。其次，CSS 屬性在所有現行瀏覽器中皆可運作，不需供應商前綴（vendor prefix），因此你在 iPhone 上複製的同一行程式碼，在 Android、macOS、Windows 與 Linux 上都會以相同方式呈現，無需額外處理。第三，由於工具在本地端執行，你的選色與停駐點位置永遠不會離開裝置，這在處理尚未公開的品牌配色或尚未分享給客戶的案件時特別實用。
同樣的做法在 iPad、Mac 以及任何搭載現代瀏覽器的裝置上也都可行，因此你可以先在通勤時用 iPhone 開始設計漸層，之後再到筆電上接著完成，無需匯出專案檔案或儲存任何東西到 iCloud。Safari 處理 CSS 漸層的方式與桌面瀏覽器完全相同，這也是為什麼 iPhone 上的即時預覽能忠實預覽訪客在其他裝置上將看到的結果。
在 iPhone 上的 Safari 中建立漸層
整個流程只需一個 Safari 分頁，書籤網址後不到一分鐘即可完成。請依照以下步驟在 iPhone 上從空白樣式表到複製 CSS 宣告。
- 開啟 Safari 並前往 /color/color-gradient-generator/。輕點「分享」按鈕並選擇「加入主畫面」，以便日後一鍵快速取用；不進行此步驟頁面仍可正常運作。
- 在工具頂端選擇漸層類型。區塊、按鈕或卡片上的方向性漸層選擇「線性（Linear）」；作為聚光燈、柔光或暈影疊層的中心向外混合則選擇「放射狀（Radial）」。
- 設定第一個色彩停駐點的顏色。拖曳該停駐點的位置滑桿，直到第一個顏色錨定在你想要的位置。
- 新增更多停駐點以建立多色帶混合、在中間某個位置固定特定顏色，或打造三色日落效果。移除你不需要的停駐點。
- 對於線性漸層，請調整角度滑桿。0deg 指向元素頂端、90deg 指向右側、180deg 指向底部、270deg 指向左側，這是標準的 CSS 角度慣例。
- 變更時請觀察即時預覽。預覽就是實際渲染的輸出，因此你所見即瀏覽器在頁面上呈現的結果。
- 輕點「複製 CSS」。完整的 background: linear-gradient(...); 或 background: radial-gradient(circle, ...); 宣告會進入你的剪貼簿，準備貼入任何樣式表、設計工具或程式碼編輯器。
由於一切都在本地端執行，你可以自由嘗試：拖曳停駐點彼此穿越、隨機套用顏色、按下「Randomize」探索你原本不會手動選出的組合，工具在每個步驟仍會產生有效的 CSS。
線性 vs 放射狀：小螢幕上該選哪一個
選錯漸層類型是區塊在行動裝置上看起來混濁最常見的原因，因此在開始拖曳停駐點之前，值得先了解兩者的差異。
| 使用情境 | 選擇 | 在 iPhone 上為何有效 |
|---|---|---|
| 主視覺背景、區塊分隔線、按鈕填色 | 線性 | 方向性漸層在任何長寬比下都能清晰呈現，包括高聳的直式版面。 |
| 聚光燈、光暈、徽章點綴、柔和暈影 | 放射狀 | 由中心向外的混合能吸引目光，又不會與前景文字競爭視覺焦點。 |
| 進度條、狀態標籤、卡片邊框 | 線性 | 短而可預測的漸層讓小型 UI 元件在 3x 密度下依然銳利。 |
| 載入閃光、懸停狀態、遮罩層 | 線性 | 大角度讓透明色能在照片之上淡入至實色。 |
| 標題後方的裝飾色塊 | 放射狀 | 由中心向外的混合即使在容器比寬度高的情況下，仍能讓視覺焦點靠近標題。 |
兩種類型共用相同的色彩停駐點規則：每個停駐點都有顏色與介於 0% 到 100% 之間的位置，瀏覽器會在兩者之間內插像素。兩個停駐點可產生乾淨的漸層；三到四個停駐點則可在特定百分比（例如 50% 處的 #00ff00）固定一種顏色，以建立條紋效果而非單一平滑過渡。Color Gradient Generator 會自動依位置重新排序停駐點，並將每個值限制在 0–100% 範圍內，因此即使在觸控螢幕上激烈拖曳，輸出結果依然有效。
色彩停駐點、角度與位置如何對應 CSS
每個 CSS 漸層都是帶有幾個特定參數的函式呼叫，而閱讀工具的輸出結果是學習每個控制項用途最快的方式。
線性漸層的 CSS 類似 background: linear-gradient(90deg, #ff7a59 0%, #4f46e5 100%);。deg 前方的數字是角度，每個百分比前方的顏色是停駐點顏色，而百分比則是停駐點位置。將角度從 90deg 改為 180deg，會把漸層從水平翻轉為垂直；將某個停駐點從 50% 移到 30%，則會把該顏色拉近漸層的起始處。
放射狀漸層的 CSS 類似 background: radial-gradient(circle, #ffffff 0%, #000000 100%);。circle 關鍵字告訴瀏覽器使用圓形而非預設的橢圓形，後者會依據容器的長寬比調整。停駐點的運作方式相同，但它們測量的是與中心的距離，而非沿著某個角度的距離。在 iPhone 上，由於元素通常比寬度高，橢圓形通常是細微背景漸層的較安全選擇；而圓形則更適合正方形按鈕、大頭貼或置中的聚光燈效果。
即時預覽會顯示完全相同的渲染結果，因此如果漸層在預覽中看起來不對，在正式環境中也會不對。這個習慣比起其他任何習慣，都能為你在行動螢幕上建立漸層時省下最多的除錯時間。
複製後的 CSS 該貼到網站的哪裡
複製宣告後，你可以幾乎貼到任何接受 CSS background 屬性的位置。在一般樣式表中，將它放進某個類別，例如 .hero { background: linear-gradient(...); }。在 Tailwind 中，可以擴充主題加入自訂背景圖片，或使用像 bg-[linear-gradient(...)] 的任意值類別套用該值。在 CodePen 或 JSFiddle 片段中，則直接貼到 CSS 面板中。
在 iPhone 本身，同一行也適用於接受自訂 CSS 的應用程式，包括 WordPress Customizer、Squarespace 的 CSS 編輯器、Notion 風格的網頁建構器（可露出程式碼區塊），以及大多數允許內嵌樣式的電子郵件編輯器。由於這個值是純 CSS 而非匯出圖片，因此沒有網路請求、字型遺失或資產託管等問題，讓頁面保持輕量，漸層在任何解析度下都保持銳利。
如果該區塊的背景漸層涉及無障礙議題，請將最亮與最暗的停駐點透過 Color Contrast Checker 與你的文字顏色進行比對，以確認該組合符合 WCAG AA。漸層背景可能會讓眼睛誤以為對比度足夠，但實際上前景文字可能落在漸層對比較低的那一端，因此在發布前花幾秒鐘檢查兩端的極值是值得的。
如需深入了解，請參閱 Repeat the Same Result With a CSS Checkbox Generator。
如需深入了解，請參閱 Repeat the Same CSS Cubic Bezier Result Every Time。