在 CSS 中，線性漸層是透過 background-image: linear-gradient() 屬性建立的，它會沿著一條指定角度的直線混合兩種或以上的顏色。雖然 Canva 提供漸層背景，但它無法讓你精細控制角度或基於百分比設定的色標。這正是 CSS 漸層產生器 派上用場的地方：它讓你建立一個具有精確角度與排列色標的三色線性漸層，然後複製驗證過的 CSS 宣告，用於 Canva 或任何其他設計工具。
許多設計師會選擇 Canva 來快速製作圖片，但當他們需要精準的漸層時就會碰壁。Canva 的漸層工具只能讓你使用基本的顏色過渡，無法調整角度或色標位置。例如，如果你在設計社群媒體橫幅，並希望使用從 45° 開始、20% 紅色、50% 白色、80% 藍色的對角漸層，Canva 內建的選項無法滿足需求。CSS 漸層產生器解決了這個問題，讓你輸入這些精確的值並產生對應的 CSS，然後透過 Canva 的自訂 CSS 功能將其套用至你的 Canva 專案。
這種方法對於需要在不同平台間保持一致性的開發者或設計師特別有用。與其在 Canva 中手動調整漸層並祈禱它們與你網站的設計相符，不如一次產生 CSS 並在所有地方重複使用。這個工具也會驗證你的輸入，確保色標依遞增順序排列，且角度在 0–360° 範圍內，讓你避免語法錯誤。下方，我們將逐步說明如何使用產生器、在 Canva 中套用漸層，以及進行無障礙測試。
CSS 漸層產生器 vs Canva 的工具：哪個效果更好
Canva 的漸層工具對於簡單設計很方便，但缺少專業專案所需的精確度。以下是 CSS 漸層產生器的比較：
| 功能 | Canva 的漸層工具 | CSS 漸層產生器 |
|---|---|---|
| 角度控制 | 固定方向（水平、垂直、對角） | 從 0° 到 360° 的任何角度 |
| 色標 | 僅基本的起始／結束顏色 | 三色搭配自訂百分比色標 |
| 輸出 | 影像式（點陣） | CSS 程式碼（向量，可縮放） |
| 可重複使用性 | 僅限於 Canva 專案 | 可用於 Canva、網站及其他工具 |
| 無障礙測試 | 手動對比檢查 | 含對比提示的視覺預覽 |
這個產生器最大的優勢在於能產生具確定性的 CSS。例如，如果你在設計登陸頁面，需要一個與品牌色彩搭配相符的漸層，你可以一次產生 CSS，然後同時套用到你的網站和 Canva 圖片中。這能確保所有素材的一致性。此外，工具的預覽功能讓你在最終採用前先測試漸層的效果，這是 Canva 工具所沒有的。
如何使用精確色標建立三色線性漸層
請依照以下步驟使用 CSS 漸層產生器建立線性漸層：
- 設定角度： 在角度輸入欄位中輸入介於 0 到 360 度之間的值。例如，45° 會建立一個從左下到右上的對角漸層。
- 選擇三種顏色： 點擊顏色選擇器來選取顏色。為了精確起見，請使用六位數十六進制代碼（例如
#FF5733）。第一個顏色是起點，第二個是中點，第三個是終點。 - 設定百分比色標： 調整滑桿或輸入數值，將三個色標依遞增順序排列（例如 20%、50%、80%）。色標決定了漸層線上每種顏色的開始與結束位置。
- 複製 CSS 宣告： 點擊「Copy CSS」按鈕複製產生的程式碼，看起來會像這樣：
background-image: linear-gradient(45deg, #FF5733 20%, #FFFFFF 50%, #3366FF 80%);
- 測試對比： 使用預覽面板來檢查可讀性。如果文字會疊在漸層上，請確保對比度符合 WCAG 2.1 標準（一般文字至少 4.5:1）。
如果你是漸層新手，可以從簡單的 90° 角度（垂直）和兩個色標（0% 和 100%）開始，觀察顏色如何混合。熟悉之後，可以嘗試 135° 或 315° 等角度，創造更具動態的效果。產生器的即時預覽會在你調整數值時更新，讓你在複製程式碼前微調漸層。
在 Canva 中套用漸層
Canva 並未原生支援 CSS 漸層，但你可以透過 Canva Pro 的「Custom CSS」功能套用它們。方法如下：
- 開啟你的 Canva 專案： 開始新設計或開啟現有設計。選取你想要套用漸層的物件（例如矩形或文字方塊）。
- 啟用自訂 CSS： 點擊上方工具列中的「Effects」按鈕，然後選擇「Custom CSS」。如果你看不到此選項，可能需要 Canva Pro 訂閱。
- 貼上 CSS： 在自訂 CSS 面板中，貼上你從產生器複製的宣告。例如：
background-image: linear-gradient(45deg, #FF5733 20%, #FFFFFF 50%, #3366FF 80%);
- 調整物件： 確保物件的尺寸夠大，以便清楚地顯示漸層。如果漸層沒有出現，請檢查物件是否具有透明背景（移除任何實心填色）。
- 儲存並匯出： 漸層看起來正確後，儲存你的設計。將其匯出為 PNG 或 JPG——Canva 會將漸層渲染為影像的一部分。
如果你使用的是 Canva 免費版本，你仍然可以透過在其他工具（例如 Photoshop 或線上 CSS 轉影像轉換器）中建立漸層的透明 PNG，然後將其上傳為影像來使用漸層。然而，這種方法缺乏可縮放性，重新調整大小時可能會出現像素化。為了獲得最佳效果，Canva Pro 的自訂 CSS 功能是最佳選擇。
測試漸層的無障礙性
如果對比度不足，漸層可能會使文字難以閱讀。為了確保你的設計具有無障礙性：
- 檢查對比度： 使用 WebAIM 的 Contrast Checker 等工具來測試文字與漸層最淺／最深點之間的對比度。一般文字的目標是至少 4.5:1。
- 加入實心疊加層： 如果漸層過於雜亂，可以加入半透明疊加層（例如
rgba(0, 0, 0, 0.5)）來改善可讀性。在 Canva 中，你可以透過在漸層上方新增一個低透明度填色的矩形來做到這一點。 - 以灰階測試： 將你的設計轉換為灰階，查看漸層是否仍然提供足夠的對比。如果沒有，請調整顏色或色標。
例如，從白色 (#FFFFFF) 到淺灰色 (#CCCCCC) 的漸層可能看起來很時尚，但黑色文字放在上面會無法通過無障礙標準。在這種情況下，你可以將第二個顏色加深為 #AAAAAA，或為文字加入深色疊加層。CSS 漸層產生器的預覽功能可幫助你及早發現這些問題，讓你在將漸層套用到設計前進行調整。
漸層設計的進階技巧
一旦你掌握了基本漸層，可以嘗試以下技巧來提升你的設計：
- 多方向漸層： 使用具有多個值的
background-image屬性，在單一元素中結合兩個線性漸層。例如：background-image: linear-gradient(90deg, #FF5733 0%, transparent 50%), linear-gradient(180deg, #3366FF 0%, transparent 50%);
這會建立一個交叉影線效果。使用 CSS Grid 產生器 將元素與這些漸層對齊，創造協調一致的版面配置。 - 漸層文字： 使用
background-clip: text屬性將漸層套用至文字。在 Canva 中，由於不支援此 CSS 屬性，你需要先在其他工具（例如 Photoshop）中建立文字並將其上傳為影像。以下是供參考的程式碼：background: linear-gradient(45deg, #FF5733, #3366FF); -webkit-background-clip: text; background-clip: text; color: transparent;
- 動畫漸層： 使用 CSS 動畫來創造漸層的位移效果。將以下內容加入你的 CSS：
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-element { background: linear-gradient(90deg, #FF5733, #3366FF, #FF5733); background-size: 200% 200%; animation: gradient 15s ease infinite; }請注意，Canva 的自訂 CSS 可能不支援動畫，因此此技巧最適合用於網頁專案。
若想獲得更多靈感，請參考 玻璃擬態效果指南，它經常以漸層作為基底層。你也可以將漸層與其他 CSS 屬性（例如 border-radius 或 box-shadow）結合，創造現代化的 UI 元素。
如需更深入的探討，請參閱 Make a CSS Grid in Minutes with a Live Generator。
如需更深入的探討，請參閱 How to Get a CSS Loader With a Visual Generator。