從圖片產生漸層的工具是一種視覺化工具，能讓你把圖片中看到的顏色與方向轉換成可直接複製的 CSS 漸層宣告。它不是讓你上傳檔案然後等待軟體猜測你的需求，而是反過來運作:你觀察圖片，辨識出主要或點綴顏色，判斷原始漸層是橫跨圖片(線性)還是從某一點向外輻射(放射狀)，然後讀回一個有效的 linear-gradient() 或 radial-gradient() 值，直接貼到樣式表即可。每一個 CSS 漸層都是由色標組成，每個色標是一組顏色搭配從 0% 到 100% 的位置，瀏覽器會在色標之間平滑地內插像素。雙色標漸層會呈現從一個顏色到另一個顏色的乾淨漸變，而加入第三或第四個色標就能在某個特定位置固定一個顏色——例如在 50% 處放上 #00ff00——進而產生多色帶混合而非單純的漸變。由於輸出是純 CSS 而非匯出的點陣圖，因此在任何元素尺寸或螢幕解析度下都能清晰縮放，在所有現行瀏覽器中都能運作且不需要廠商前綴，也只會為你的專案增加一個 CSS 屬性與零個網路請求。
「從圖片產生漸層」真正的含義
這個詞聽起來應該是「上傳一張照片然後取得一段 CSS 漸層」，但實際上，這個搜尋反映的通常是另一種需求:設計師或開發者在圖片中——一張主視覺照片、產品照、別人網站的螢幕截圖——看到一個喜歡的漸層，想要在自己的樣式表中重現那個效果。可靠的工作流程是把圖片當作參考，而不是輸入。你用肉眼判斷或取樣想要的顏色，決定原始漸層是橫跨圖片(線性)還是從某一點向外輻射(放射狀)，然後視覺化地建立一個相符的漸層，再複製 CSS。
這正是 顏色漸層產生器 所設計處理的場景。這個工具完全在你的瀏覽器中執行，所以參考圖片留在你的螢幕上，不會有任何東西上傳到伺服器。你選擇漸層類型、調整線性漸層的角度、設定每個色標的顏色與 0–100% 位置、在操作過程中即時預覽更新，然後按一個按鈕就能複製一段語法正確的 background: 宣告。由於輸出是純 CSS 而非儲存的圖片，因此在任何元素尺寸下都能清晰縮放，在任何螢幕解析度下都表現良好，也為你的頁面增加零個網路請求。想深入了解「視覺化建立並複製」方式的讀者，可以參考 漸層色票指南，該指南以色票導向的範例說明相同的工作流程。
線性 vs 放射狀:選擇正確的漸層類型
CSS 提供兩種可用於正式上線的漸層類型，一旦手邊有了參考顏色，這兩者的選擇就是你要做的第一個真正決定。觀察原始圖片如何漸變:如果顏色的變化是橫越主體的寬度或高度，你應該使用 線性漸層;如果變化是從單一點散發出來——太陽、聚光燈、柔和的暗角——你應該使用 放射狀漸層。線性漸層需要明確的角度(0deg 指向上方，90deg 指向右方，180deg 指向下方)，色標會沿著該方向排列。放射狀漸層從中心點開始向外混合，預設為填滿整個元素的橢圓形。下表摘要說明每種類型的行為以及最適合的場景。
| 屬性 | linear-gradient() | radial-gradient() |
|---|---|---|
| 混合方向 | 沿著設定角度的直線 | 從中心點向外 |
| 關鍵輸入 | 以度數表示的角度，兩個或以上的色標 | 形狀(圓形或橢圓形)、中心、色標 |
| 角度慣例 | 0deg 向上，90deg 向右，180deg 向下 | 不適用——中心另外控制 |
| 最適合圖片啟發的用途 | 主視覺背景、按鈕填色、分區分隔線、讓文字仍可閱讀的圖片疊加 | 聚光燈效果、產品照背後的柔和光暈、暗角邊緣、徽章亮點 |
| 典型輸出語法 | background: linear-gradient(90deg, #a, #b); | background: radial-gradient(circle, #a, #b); |
把圖片轉成 CSS 時有一個實用技巧:你選擇的角度應該符合圖片中看起來的方向。如果照片的光源位於左上角，角度介於 135deg 到 180deg 之間的線性漸層通常能重現那種感覺。如果亮點正好在正中央，改用放射狀漸層，調整色標直到預覽符合為止。
如何從圖片參考建立 CSS 漸層
完整的「圖片轉 CSS 漸層」工作流程，一旦選定參考顏色，只需幾分鐘就能完成。請在顏色漸層產生器中依下列步驟操作，結束時你就會有一段有效、可直接複製的宣告。
- 選擇漸層類型。如果參考圖片中的顏色是從一邊漸變到另一邊，請選擇線性;如果顏色是從單一點(例如聚光燈或暗角)向外輻射，請選擇放射狀。
- 設定每個色標的顏色並拖曳其位置滑桿。為每個色標輸入十六進位值(或使用選色器)，然後在 0% 到 100% 之間拖曳位置把手。可加入第三或第四個色標以在定義好的位置固定特定顏色——例如把 #00ff00 放在 50% 以做出三色帶混合。不需要的色標可以刪除;工具會自動依位置重新排序。
- 調整線性漸層的角度。拖曳角度控制項，直到預覽與參考圖片中顏色變化的方向一致。0deg 指向上方，90deg 向右，180deg 向下。
- 查看即時預覽。預覽面板會顯示實際渲染結果，因此請持續調整顏色、色標與角度，直到漸變符合來源圖片中的樣子。
- 點擊複製 CSS。一鍵就能把完整的 background: linear-gradient(...) 或 background: radial-gradient(...) 宣告放到剪貼簿，準備貼到任何樣式表。
如果一時想不出起始色票，點擊隨機按鈕來探索你手動不會選到的組合。接著你可以鎖定喜歡的顏色，再調整其餘部分。
色標與角度:控制視覺效果
色標是任何 CSS 漸層中最重要的控制項，也是大多數「從圖片」重現工作成敗的關鍵。一個色標就是一對值:一個顏色與一個從 0% 到 100% 的位置。瀏覽器會在兩個相鄰色標之間平滑地內插顏色，因此位置值本質上就是錨點，代表「在漸層中的這個位置固定呈現這個顏色」。
兩個色標能給出乾淨的漸變，這對簡單的雙色背景而言沒問題，但很少能捕捉到照片中的細膩變化。三個色標能解鎖多色帶混合:如果你的參考圖片有一個主要顏色、一小段中間調亮點，以及第二個主要顏色，就可以用三個色標把每個顏色固定在適當位置。四個色標則能建立幾乎像照片般分層的過渡，適合用在主視覺背景，讓漸層感覺與來源照片一樣豐富。
角度控制項只適用於線性漸層，用來決定混合的方向。慣例是 0deg 在頂端、90deg 在右側、180deg 在底端、270deg 在左側。如果參考圖片呈現由左至右的變化，設定 90deg;如果是從上到下的變化，設定 180deg。至於斜向，介於這些基本方向之間的任何值都能近似你在圖片中看到的角度。顏色漸層產生器會把每個色標限制在有效的 0–100% 範圍內，並自動依位置重新排序，因此不管你怎麼編輯，它輸出的 CSS 都永遠是語法正確的。
圖片啟發的漸層最適合用在哪些地方
從圖片參考建立的漸層，在現代介面設計中往往特別適合出現在幾個反覆出現的位置。主視覺與分區背景是最明顯的:一種呼應你品牌攝影主要色調的漸變，能讓頁面感覺統一，而不需要使用滿版圖片。按鈕與卡片填色緊隨其後，特別是當你想讓主要動作跳出來，卻不想選用單一平面品牌色時。
圖片疊加是另一個高價值的用途。當你在照片上蓋一層漸層以確保白色文字可讀時，使用實際存在於照片中的顏色來建立疊加層，會讓文字感覺是「落地」而不是「貼上去」的。徽章、標籤膠囊和進度條也能受惠於同樣技巧:一個呼應周圍色系的簡短漸層，看起來會像是刻意的設計，而不是套版元素。
至於裝飾用途——柔和光暈、懸停狀態、分區之間的分隔線——從參考圖片中的聚光燈效果轉換而來的放射狀漸層特別好用。在產品卡片或行動呼籲按鈕後方放一個小型放射狀漸層，就能模擬主視覺照片中的打光效果，而且資產重量為零，因為你從工具複製的 CSS 就只是一段 background: 宣告:沒有圖片、沒有廠商前綴、沒有 JavaScript、沒有建置步驟。一個屬性、零個網路請求，而且在任何螢幕上都能清晰縮放。
想更深入了解，請參閱 網頁設計互補色尋找器:CSS 配色。