WebGradients是免費的線性漸變資源庫，提供 180 + 專業設計的漸變配色方案，專為網頁設計、UI/UX 及視覺設計打造，支持快速獲取跨瀏覽器兼容的 CSS 代碼和多格式資源，提升設計效率與視覺效果。

核心功能與特點

1. 豐富的漸變資源

• 180 + 線性漸變：涵蓋多種風格（清新、復古、高飽和、低明度等），如 “Warm Flame”（暖色調）、“Night Fade”（冷色調漸變）、“Juicy Peach”（柔和過渡）等，滿足不同設計場景的調性需求。
• 多格式支持：
  • CSS3 代碼：直接復制跨瀏覽器兼容的linear-gradient代碼，支持自定義角度、顏色位置（如to right/to top/45deg等），適配網頁背景、按鈕、邊框等元素。
  • PNG 圖片：提供每個漸變的靜態圖片，方便用于非代碼場景（如 PPT、海報、社交媒體圖）。
  • 設計工具資源包：包含 Sketch 和 Photoshop 專用文件，便于設計師在專業軟件中快速調用。

2. 免費與易用性

• 完全免費：所有漸變資源可自由用于商業或個人項目，無需注冊、付費或署名（版權歸 Dima Braven 所有，遵循 MIT 協議）。
• 即取即用：無需復雜操作，瀏覽頁面即可查看實時預覽效果，點擊復制代碼或下載素材，大幅降低設計門檻。

3. 跨平臺兼容性

• 瀏覽器適配：CSS 代碼基于現代瀏覽器標準，兼容 Chrome、Firefox、Edge 等主流瀏覽器，支持響應式設計。
• 多場景應用：不僅限于網頁背景，還可用于 APP 界面、圖標設計、印刷品漸變元素等，靈活適配不同媒介。

適用場景

• 網頁設計：快速生成美觀的背景漸變，提升網站視覺層次（如頭部導航、按鈕懸停效果、卡片式布局）。
• UI/UX 設計：為移動應用、小程序設計提供協調的色彩過渡，增強界面現代感（如啟動頁、數據可視化圖表）。
• 視覺素材制作：海報、Banner、社交媒體圖片等場景，通過預設漸變提升設計效率（尤其適合非專業設計師）。
• 設計工具集成：Sketch 和 Photoshop 用戶可直接導入資源包，簡化配色流程，避免手動調試漸變參數。

使用示例

1. 網頁背景應用：

   .hero-section {  
     background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);  
   }  

2. 設計軟件導入：下載 Sketch 資源包后，在圖層樣式中直接選擇預設漸變，快速應用于界面元素。

注意事項

• 漸變類型限制：目前僅提供線性漸變（linear-gradient），暫不支持徑向漸變（radial-gradient）或重復漸變（repeating-linear-gradient）。
• 自定義調整：如需修改漸變角度或顏色位置，需手動編輯 CSS 代碼（官網提供的是預設方案，靈活性依賴用戶代碼能力）。
• 視覺適配：部分高對比度漸變可能影響文字可讀性，建議搭配色階工具檢查前景與背景的對比度（如使用 WebAIM 對比度檢查器）。

總結